two column css setup floating over container div

Question

I have a very simple two column setup shows below.

However in example one where I have the two column setup the #left and #right divs will float above the #posts container.

Example 2 does not float like this but is not the two column setup I am looking for. Suggestions?

div#posts 
{
   width: 700px;  
   margin: 0 auto;  
   margin-top: 5px;
   margin-bottom: 0px;  
   padding: 5px;  
   border: 1px solid #CCC;  
   background-color: #EEE;  
} 

div#left {
   float:left;
   width:100px;
   background:#EEE;
}

div#right {
   float:right;
   width:500px;
   background:#EEE;
}


<!-- example 1 

<div id="posts">
    <div id="left">post</div>
    <div id="right">post</div>
</div>

<!-- example 2

<div id="posts">
    <div>post</div>
    <div>post</div>
</div>

Answer 1

[edit: OK, forget that]

The right way to approach this is to add a div inside the Posts div but after the columns with the attribute clear: both;

Ex:

<div id="posts">
    <div id="left">post</div>
    <div id="right">post</div>
    <div style="clear: both;"></div>
</div>

Most people keep a .clear class (.clear { clear: both; } ) on hand for this purpose. It comes up quite frequently.

Answer 2

Just add overflow: auto; to your div#posts rule.

Setting the overflow property to auto has the side-effect of causing that element to contain floats in all modern browsers. The only time (that I'm aware of) that this can cause issues is if there is some constraint (limited space available, explicit width/height with oversized contents, etc.) which makes automatic scrollbars undesirable, but that isn't common. (In fact, automatic scrollbars are usually a good thing in those cases.)

Answer 3

Overflow:auto would be an elegant solution, if it were cross-browser compatible. It will cause you some problems on IE6/7 if I remember correctly.

Some more info on overflow auto/hidden http://www.wickham43.supanet.com/tutorial/scrollingdivs.html