Container div not extending downwards to hold other divs

[partisanentity]

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]

You need to clear your floats. Try setting overflow:auto; to #lowerarea.
See www.quirksmode.org/css/clearing.html

[partisanentity]

Originally Posted by abduraooft

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