CODEWITHSUNDEEP
htmlcss
ian
ian

Reputation: 12355

two column css setup floating over container div

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>

Upvotes: 0

Views: 2875

Answers (3)

Marcus
Marcus

Reputation: 5153

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

Upvotes: 0

Ben Blank
Ben Blank

Reputation: 56654

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.)

Upvotes: 4

Matt Brunmeier
Matt Brunmeier

Reputation: 1310

[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.

Upvotes: 0

Related Questions