...

View Full Version : Container div not extending downwards to hold other divs



partisanentity
01-06-2010, 11:58 AM
Hi all,

I have an issue with a css layout that I just don't understand and which I have been trying to resolve for days now without success.

I have a container div and within it I have two other divs, one floated right and one floated left.

The problem is that the container div does not seem to grow flexibly with the content and size of the two divs inside it.

Here is the css:


#lowerarea {
margin:0 auto;
width:892px; /*was 894*/
margin-top:3px;
clear:both;
background-color:#FFFFFF;
border:1px solid #000000; /*added for emphasis*/
}

#lowerright {
float:right;
width:279px; /*280px*/
background-color:#FFFFFF;
/*height:100%;*/
}

#lowerleft {
float:left;
width:613px; /*614*/
/*height:100%;*/
background-color:#FFFFFF;
}

and here is the html:


<div id="lowerarea">

<div id="lowerleft">
<h2>Latest News</h2>

</div>

<div id="lowerright">
<h2>Latest Images</h2>

</div>

</div>

a screenshot of what this looks like at the moment is attached.

You can see the black border at the top, this belongs to #lowerarea, but then #lowerarea just seems to disappear behind the two divs that are inside it and it wont extend to the bottom.

Any idea what I have done wrong?

Thank you!

abduraooft
01-06-2010, 12:13 PM
You need to clear your floats. Try setting overflow:auto; to #lowerarea.
See www.quirksmode.org/css/clearing.html

partisanentity
01-06-2010, 12:19 PM
You need to clear your floats. Try setting overflow:auto; to #lowerarea.
See www.quirksmode.org/css/clearing.html

Thank you so much.

overflow:auto; seems to have done it, I add it to #lowerarea and now it extends nicely all the way to include the two contained divs.

Thank you, thank you, thank you :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum