CSS: Div not extending with child divs

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

Here are the styles in question:

#content{
background: #fff;
clear: both;
color: #333;
padding: 10px 20px 40px开发者_Python百科 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 it's the absolute positioning in the left and right columns that is messing things up. Every other page that doesn not use the column styles works fine. The height of the parent div extends with what is inside it.

Can someone help me out please?

Jonesy

Absolutely positioned elements are taken out of the document flow, so the container div won't 'see' them. Try floating the 3 divs left, and adding overflow:auto; to the container div. The latter (not a blank 'clearing' div) is the current best practice.

Alternatively, use CSS flexbox to arrange the 3 divs.

Your parent column will not extend to fit the content of the child columns since 2 of them are position: absolute;

If everything were position: relative or all position: absolute it would work.

Unless there a very pertinent reason you are absolutely positioning the #leftcol and #rightcol, you should be floating them so they are contained within the document flow as Dave Everitt said.

Any particular reason for the absolute position? What seems like a simple layout could easily be accomplished with floats/margins.

instead of clear:both, the new a best way to do it is with

overflow:auto

on the parent

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