View Full Version : Nested Div Problem

03-02-2005, 09:10 PM
I'm building a site at the moment and having trouble with some nested divs.

Within the "body" div, I have two divs called "left-body" and "right-body". The stripes you can see are the background-image of the "body" div which isn't filling out to the full height.

I need the "body" div to stretch with "left-body" and not "right-body" as it is doing just now.

Can anyone help?


Site: http://www.160676.net/digerati/
CSS: http://www.160676.net/digerati/styles/default.css

03-02-2005, 09:29 PM
Are you seeing the problem in Firefox?? Try removing height:100%; from your body element.

Nice layout by the way. :cool:

03-02-2005, 09:38 PM
>> Nice layout by the way.

Thanks :)

I'm seeing the problem in Firefox and also in IE. I've removed the "height:100%" from the body div but that just stops it from stretching the full height of the browser (as it is now), without affecting the background img prob.

Basically, I need the pink stripey image to sit right on top of the horizontal dots at the bottom of the page.

03-02-2005, 09:58 PM
Looking at the wrong bit of code. Didn't realize you've got a body element and a div with the id 'body'.

Declare the position on your background-image. Here it is with your
background rules combined.

body {
background: url(../images/background.gif) repeat-x bottom #740A08;
margin: 0px;
padding: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;

03-02-2005, 10:06 PM
The code you've shown is actually the code for the <body> tag and the background image you're referring to is a different one (it's the red to black gradient on the background of the site).

My naming conventions are poor, i know, but the section of code that deals with the stripey image is:

#body {
background-image: url(../images/stripe-background.gif);
background-repeat: no-repeat;
background-position: right bottom;

As you can see, this is positioned correctly.

If you look at the site now, you'll see that I've now put a border around the #body div to show the fact that the two divs inside it (that hold the two sections - left & right - of latin content) overrun their parent. This is the main issue i feel, but one i don't know how to correct.

03-02-2005, 10:14 PM
It's because you're clearing the float after the body div is closed, so the body stays at the height of the floated div. Try this and you'll see what I mean (note: this doesn't work in IE... you'll have to add a clearing div or some other markup after #right-body to work):

#right-body:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
clear: both;

Hope this helps,

03-02-2005, 10:21 PM
>> It's because you're clearing the float after the body div is closed

Hey, thanks for that...

I put another div after the left-body and right-body divs, called clear-body and put clear:left in the stylesheet.

That seemed to solve the problem. In both FF and IE.

Thanks again!

03-02-2005, 10:22 PM
no problem :)