CSS Forum

**Joe3000** · 08:15 AM

I have a page that uses CSS and DIVs which I am guessing is the cause of my woes.

On a smallish screen all looks well but on my larger work screen I can see a white border at the top and bottom of the page that I do not understand where it comes from.

If someone could take a look I would be most grateful:

http://www.jfwebdesign.co.uk/nu-scapes2/

http://www.jfwebdesign.co.uk/nu-scapes2/styles.css

Thanks.

PS also could you tell me how I get the middle column to be 100% height. It seems to work in IE but not FF.

**LadynRed** · 04-23-2009, 11:14 AM

You've got the background-position on <body> set to center center - use top center instead and the top gap goes away.

To fill in the gap at the bottom, set a background color on the <body> to be the same color as the bottom color of your gradient.

**Joe3000** · 04-23-2009, 11:39 AM

Thanks.

Quote:

Originally Posted by LadynRed

To fill in the gap at the bottom, set a background color on the <body> to be the same color as the bottom color of your gradient.

Is there anyway I can get rid of that border as it is obscuring the background image?

**LadynRed** · 04-23-2009, 11:48 AM

What border -- and which browser are you seeing it in ?

**Joe3000** · 04-23-2009, 11:55 AM

IE 6

It is at the bottom of the screen, overlaying the background image.

http://www.jfwebdesign.co.uk/nu-scapes2/border.JPG

**LadynRed** · 04-23-2009, 11:59 AM

When I set the background color on the body to the green I suggested, the "border" you see in IE6 goes away.

**Joe3000** · 04-23-2009, 12:16 PM

Thanks. I have set it to green. It is still there though. Not sure where it is from but it can't be seen now. Thank you.

As for my PS do you have any idea why the #content div doesnt go down to the bottom of the page in FF(2)?

I've tried adding 'min-height: 100%' to #content instead of just 'height: 100%' to no avail.

Code:

#content {
    width: 800px;
    background-color: #FFFFFF;
    border-left: 2px solid #99FF00;
    border-right: 2px solid #99FF00;
    margin: 0 auto;
    height: 100%;
}

The #container div has min-height: 100% and that fills the whole screen as far as I can tell.

Does that mean you can't have two divs that fill the whole screen vertically on one page?

**LadynRed** · 04-23-2009, 03:58 PM

Quote:

Does that mean you can't have two divs that fill the whole screen vertically on one page?

No, not at all, but it does get tricky because it's parent must also be set to 100% height to work.

You have a missing </div> tag in your code, which could be the problem - check your <div></div> pairs to fix it.

**Joe3000** · 04-27-2009, 06:59 PM

I think I've found the missing /div. Both these two divs have a height of 100% - are they missing anything else?

Code:

#container {
    min-height: 100%;
    width: 100%;
    margin: 0 auto;
    background-attachment: fixed;
    background-image: url(images/bg-leaves.png);
    background-repeat: repeat-x;
    background-position: center bottom;
}
* html #container {
    height: 100%;
}
#content {
    width: 800px;
    background-color: #FFFFFF;
    border-left: 2px solid #99FF00;
    border-right: 2px solid #99FF00;
    margin: 0 auto;
    height:100%;
}

Thanks

**LadynRed** · 04-27-2009, 09:19 PM

Doesn't appear to be