Having issues with floating divs in HTML using the CSS property "float"?

Question

I have an issue with my divs. I currently have four “divs” in html that look like below. What I want to do is have everything in my page inside the “page” div. Inside the “main” div I have the “content” and “side” div and both have the “float:left” property from CSS. What’s happing is that when I do this I lose the background of my “page” div which is white. How can I prevent this and create my content and side divs? I know this is easy but for some reason I’m not getting it right. Any help will be appreciated.

Thanks

<div id=”page”>
   <div id=”container”>
   </div>
   <div id=”main”>
      <div id=”content”>
      </div>
      <div id=”side”>
      </div>
   </div>
</div>

This is my CSS code

#page 
{
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
}

#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
}

#content 
{
clear: both;
padding: 1.625em 0 0;
width:740PX;;
float:left;
}

#side
{
width:250px;
margin:5px;
float:left;
}

Answer 1

The reason you lose the background of your div is because it only contains floating content, which causes it to have no height. Once something "clears" the floats, it will occupy space again. Try adding this after your main div (you can have the style in the style sheet instead):

<div style="clear: both;"></div>

Answer 2

You need to contain your floats. When you float an element, it takes it out of the document flow, so any parent container will just collapse if you don't tell it to contain the child floats.

To contain child floats, the easiest is to apply overflow: auto.

So try this:

#page {
    margin: 2em auto;
    max-width: 1000px;
    background-color:#fff;
    overflow: auto;
}