...

View Full Version : Nested div not extending background of parent



dprichard
03-11-2010, 09:01 PM
I have a container and in that container I have 3 divs, the top, mid and bottom. In the mid, I have a repeating background image and two divs in it for left and right content. The problem I am having is that the content divs body-mid-left and body-mid-right are extending, but the background image in the body-mid isn't repeating or showing. If I take the content out of the mid left and right and put it directly in the mid it works fine, but if I put it in the mid right and left, no bg image from the mid. I am not sure what I am doing wrong, but any help would be greatly appreciated.



#bodycontainer {
width: 965px;
margin: auto;
}
#body-top {
width: 965px;
height: 9px;
background: url(../images/bg-body-top.png) no-repeat;
}
#body-mid {
width: 965px;
height: auto;
background-image: url(../images/bg-body-mid.jpg);
}
#body-mid-left {
width: 597px;
float: left;
}
#body-mid-right {
width: 368px;
float: left;
}
#body-bot {
width: 965px;
height: 12px;
background: url(../images/bg-body-bot.png) no-repeat;
}




<div id="bodycontainer">
<div id="body-top">
</div>
<div id="body-mid">
<div id="body-mid-left">
<h1>Welcome to Our Practice</h1>
</div>
<div id="body-mid-right">
<h1>Testimonials</h1>
</div>
</div>
<div style="clear:both"></div>
<div id="body-bot">
</div>
</div>

VIPStephan
03-11-2010, 09:36 PM
http://complexspiral.com/publications/containing-floats/

dprichard
03-11-2010, 09:46 PM
Thank you I was able to find the answer with your link. My clear needed moved up.

Excavator
03-11-2010, 11:33 PM
Hello dprichard,
It's easy to clear it without adding markup. Remove that clearing div and add this to your CSS -

#body-mid {
width: 965px;
height: auto;
background: url(../images/bg-body-mid.jpg);
overflow: auto;
}

Clearing with overflow:auto; explained here (http://www.quirksmode.org/css/clearing.html).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum