CSS: Div does not apply to child divs

Question

I have a div that contains 3 columns (each as a div). The problem is that the height of the parent div does not extend with the height of the columns.

Here are the styles:

#content{
background: #fff;
clear: both;
color: #333;
padding: 10px 20px 40px 20px;
overflow: auto;
}

#leftcol { 
position:absolute;
float:left;
top:285px;
z-index:100;
background-color:#EEEEEE;
padding:5px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#rightcol {
position: absolute;
right:208px;
top:285px;
width:177px;
background-color:#EEEEEE;
padding:5px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#centercol {
margin-left: 288px;
margin-right:200px;
background-color:#EEEEEE;
padding:5px;
-moz-border-radius: 10px;
border-radius: 10px;
}

I think this is the absolute positioning in the left and right columns that messed things up. Every other page that doesn't use column styles works fine. The height of the parent div continues with what's inside it.

Can someone help me?

Jonesi

Answer 1

, div "" . 3 div overflow:auto; div. ( "" div) .

Answer 2

, , 2 : position: absolute;

: : , .

Answer 3

, #leftcol #rightcol, , , .

? , , float/margin.

Answer 4

clear: both,

overflow:auto

before it was suggested to use a div like this

<div class="clear"></div>

at the end of the parent, but the best approach is with overflow