HTML – CSS problem with DIVs

Question

I have following HTML layout

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body {
                margin:10px 0px 0px 0px;
                font-size: 11px;
                font-family: Arial,Tahoma, sans-serif;
                background: #fff;
                color: #444;
            }

            h1 {
                font-size:1.5em;
                font-weight: bold;
            }


            #container { 
                width: 920px;
                margin: 0 auto;
                background-color: red
            }

            #header {
                border: 2px solid #ccc;
                height: 80px;
            }

            #content{
                display: block;
                width: 100%
            }

            #left {
                clear: left;
                float: left;
                width: 660px;
                border: 2px solid #ccc;
                margin:0 0 10px 0;
                padding:20px;
            }

            #right {
                position: relative;
                margin: 0 5px 0 5px;
                padding: 5px 0px 0px 0px;
                float: right;
                width: 200px;
                border: 2px solid #ccc;
            }

            #footer {
                clear: both;
                border: 2px solid #ccc;
                padding: 10px 0 20px 0;
                margin: 20px 0 0 0;
                font-size: .9em;
                color: #9b9b9b;
                width: 100%;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header" >
                <h1>Header</h1>
            </div>
            <div id="content">
                <div id="left">
                    <h1>Left</h1>
                </div>

                <div id="right">
                    <h1>Right</h1>
                </div>
            </div>
        </div>
        <div id="footer">
            <h1>Footer</h1>
        </div>
    </body>
</html>

My problem is #container doesn’t hold the #left & #right contents, it only holds #header

Please refer attached imaged to see what my intended layout is.

Actual and intended results

yoavmatchulsky · Accepted Answer · 2011-03-19 10:25:15Z

2

You can add an empty element that has 'clear:both' at the end of the container:

<div id="container">
  <div id="header" >
    <h1>Header</h1>
  </div>
  <div id="content">
    <div id="left">
      <h1>Left</h1>
    </div>
    <div id="right">
      <h1>Right</h1>
    </div>
    <div style="clear:both">&nbsp;</div>
  </div>
</div>

answered Mar 19, 2011 at 10:25

yoavmatchulsky

2,9501 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SLM · Accepted Answer · 2011-03-19 12:38:15Z

0

I was able to achieve the intended result by using overflow: hidden; property

#container { 
      width: 920px;
      margin: 0 auto;
      background-color: red;
      overflow: hidden;
}

answered Mar 19, 2011 at 12:38

SLM

8493 gold badges14 silver badges31 bronze badges

Comments

Paul Sullivan · Accepted Answer · 2012-06-17 20:26:38Z

0

Use a clearfix solution i.e.

common un-obtrusive clearfix solution

answered Jun 17, 2012 at 20:26

Paul Sullivan

2,8752 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

HTML – CSS problem with DIVs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related