03-02-2005, 08: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?
03-02-2005, 08: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, 08:38 PM
>> Nice layout by the way.
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, 08: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.
background: url(../images/background.gif) repeat-x bottom #740A08;
font-family:Verdana, Arial, Helvetica, sans-serif;
03-02-2005, 09: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:
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, 09: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):
Hope this helps,
03-02-2005, 09: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.