Question

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

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.