Inner div's dont resize the parent div

Ok, I'm designing a layout and I have some content thats loaded the following way:


<div id="mainDiv">

<div id="headerDiv"></div>
<div id="contentDiv">
<div id="leftDiv"></div>
<div id="rightDiv"></div>
</div>
<div id="footderDiv">
<?php include('footer.php'); ?>
</div>

</div>


with the CSS as follows:


body {
background-attachment: fixed;
background-image: url(images/background_bubble.jpg);
background-repeat: no-repeat;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
background-position: center;
}
#mainDiv {
position:relative;
width: 1000px;
min-height: 100%;
background-repeat: repeat;
background-image: url(images/70percent.png);
margin-right: auto;
margin-left: auto;
}
#mainDiv #footderDiv {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
text-decoration: none;
text-align: center;
background-image: url(images/20percent.png);
padding: 10px;
width: 980px;
margin-right: auto;
margin-left: auto;

}

#mainDiv #headerDiv {
color: #FFF;
height: 100px;
width: 970px;
margin-right: 15px;
margin-left: 15px;
padding: 15px;
}
#mainDiv #contentDiv {
color: #000;
}
#mainDiv #contentDiv #leftDiv {
float: left;
width: 630px;
margin: 5px;
padding-left: 15px;
}
#mainDiv #contentDiv #rightDiv {
float: right;
width: 315px;
margin: 5px;
padding-right: 15px;
}


The main div does not extend all the way below the content. What am I doing wrong?

Thanks!

Oh yeah.. first post here. Great forums!

Because you're expecting the parent div to expand to contain floated elements and that won't happen cause that's not how it works. To get it to expand, you need to add 'overflow:auto' to the parent element.

Perfect!! Thats exactly what I was missing. Thanks!