Divs and Containers and CSS

[kbc]

I'm having some problems with Divs and CSS. I'm adopting a common 3 column page layout like the following:

<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:

display: table;

But this is rendering a few problems in Firefox, this solution doesn't seem sufficient, are there others?

 

[tsinc80697]

so you want the height of the 3 columns to expand downwards as more data is put into them ?

height: auto;
height 100%;

can also use a min-height to stop them contracting up to the very top

Those 3 seem to work for me on other websites

 

[Tripnologist]

If I'm understanding this correctly, you want the containing div to extend as the inner divs extend yeah?

You can either float the containing div which will automatically make it contain the children... or you can use the clear property.

http://www.positioniseverything.net/easyclearing.html


Personally, I float almost everything but I've read that a lot of people don't like doing that as it can make advanced layouts more difficult. I find it quite easy and never have any problems.