...

View Full Version : Inner div's dont resize the parent div



jud420
11-05-2009, 08:43 PM
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!

drhowarddrfine
11-05-2009, 09:49 PM
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.

jud420
11-05-2009, 09:55 PM
Perfect!! Thats exactly what I was missing. Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum