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

Nov 5th, 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 id="footderDiv">
<?php include('footer.php'); ?>


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 {
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?


Oh yeah.. first post here. Great forums!

Nov 5th, 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.

Nov 5th, 2009, 09:55 PM
Perfect!! Thats exactly what I was missing. Thanks!