(HTML+CSS) Page Layout using div and float

Question

http://imageshack.us/photo/my-images/171/screenshot01p.png/

Hello, I'm currently working on a webpage layout, which is done using <div> and "float" attribute.

As shown in the image above, my page layout is divided into 3 sections using <div>:
<div id="header">, marked by red box
<div id="content">, marked by green box
<div id="footer">, marked by yellow box

Then I further divide the content into two parts (left & right):

<div id="left">
<div id="right">

The left div will contain element "a" (positioned at top left) and "b" (positioned at bottom left) while the right one will only contain "c".

Here's my code for implementing it:

<div id="header"></div>

<div id="content">
    <div id="left">
        <div id="topleft">a</div>
        <div id="bottomleft">b</div>
    </div>
    <div id="right">c</div>
</div>

<div id="footer"></div>

and here's the CSS

#header {
border: 5px solid red;
}

#content {
    border: 5px solid greenyellow;
    width: 1024px;    
    height: auto;   
}

#footer {
    border: 5px solid yellow;
}

#left {
    float: left;
    width: 480 px;
    border: 1px solid black;        
}

#topleft {
    border: 1px solid black;  
}

#bottomleft {
    border: 1px solid black;  
}

#right {
    float: left;
    width: 480 px;
    border: 1px solid black;        
}

I used height: auto in #content because I was expecting the content section to expand after containing a b and c, but it looked like it's containing no element. Instead, the content from a b and c were overlapping with the footer.

I did try using "clear: both" in CSS for the footer - this seems to fix the overlapping problem, but still the content did not expand at all! (height = 0)

Is there any way to fix this?

Thanks.

Answer 1

Well, the code you have written seems to work fine on IE.

Answer 2

Add overflow:auto

#content {
    border: 5px solid greenyellow;
    width: 1024px;    
    height: auto;  overflow:auto 
}

DEMO