CSS: Div not extending with child divs

Question

Hi,

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

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.