I'm having some problems with Divs and CSS. I'm adopting a common 3 column page layout like the following:
Now the 3 columns are enclosed in the main Div container and since the 3 columns are floated, I want the main Div container to extend downwards with the 3 columns as they are populated. I've searched the net and I've still no solution aside from applying the following style to the outter container:
But this is rendering a few problems in Firefox, this solution doesn't seem sufficient, are there others?
Code:
<div style="width: 906px; margin: auto; display: table; background-color: #FF0000">
<div style="float: left; width: 200px; border: 1px solid #111">LEFT</div>
<div style="float: left; width: 500px; border: 1px solid #111">MIDDLE</div>
<div style="float: left; width: 200px; border: 1px solid #111">RIGHT</div>
</div>Now the 3 columns are enclosed in the main Div container and since the 3 columns are floated, I want the main Div container to extend downwards with the 3 columns as they are populated. I've searched the net and I've still no solution aside from applying the following style to the outter container:
Code:
display: table;But this is rendering a few problems in Firefox, this solution doesn't seem sufficient, are there others?