CSS Layout - filling a container div with divs

Hi all,

I'm excruciatingly close to completing a three column CSS layout, in fact I have. But I have a problem..

I have one container div, containing 3 other divs, all floated left so they stack up next to each other, this works great (the container div is a fixed width). However, I want to have a solid background colour in the container div but this won't work. The container div is effectively 'empty' as it only contains the three other divs. The 3 divs flow out of this container div, overflow:visible won't have any effect because it only relates to actual content within a div, not other divs.

If I put line breaks or other inline content in the container div, it stretches down accordingly, but as I want the container div to automatically "envelope" the three inside divs automatically, I'm at a loss.

Can anyone help here? relative and absolute positioning the divs within the container doesn't work either.

<div id="container" style="background-color: bgcolor;">
<div id="1">blah1</div>
<div id="2">blah2</div>
<div id="3">blah3</div>
</div>

That won't work, if you try it. The divs 'drop out' the bottom of the container.

The solution, it seems, is height: auto, followed by a box model hack that specifies min-height: <value> for CSS2 compliant browsers.

.centercontent {
height: 520px;

}

html>body .centercontent {

height: auto;
min-height: 520px;
}

If you float all the <div>s you'll get the desired effect.

I just tried that, and the divs sit on top of one another, not next to each other...

Sorry, I didn't read your entire post so I missed that part. Just don't clear the last two. The key is that the container must also float.

Ah! Excellent!

Many thanks!