Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Nested Div Problem

    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?

    Thanks

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

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you seeing the problem in Firefox?? Try removing height:100%; from your body element.

    Nice layout by the way.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    >> 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.

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Edit: 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.
    Code:
    body {
    	background: url(../images/background.gif) repeat-x bottom #740A08;
    	margin: 0px;
    	padding: 0px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:11px;
    	color:#333333;
    }
    Last edited by mcdougals4all; 03-02-2005 at 09:02 PM.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    #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.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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):
    Code:
    #right-body:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    }
    Hope this helps,

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    >> 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!

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    no problem


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •