Cannot get rid of space at the bottom of HTML page with CSS styling

Question

Hi there, I recently posted a question about centering a page with CSS. I figured out how to do that and it looks great, but now, there is a bunch of unnecessary space at the bottom of my page. I can't figure out how to get rid of it.

I uploaded it to a quick free webhost so you guys can take a look. This is what I'm trying to work with: http://eric.200u.com/index.html

This is my CSS regarding the centering of the page:

html, body 
{
    padding: 0;
    margin: 0;
}

#container 
{
    width: 700px;
    margin: 0 auto;
    text-align: left;
}

Answer 1

That's because you are using relative positioning to place elements on top of each other. When you do that the elements are displayed somewhere else than their original position, but they still take up space in the document flow where they would have been.

Use absolute positioning instead so that you take the elements out of the document flow.

Answer 2

The problem is because of the background div

<div id="bg"></div>

because the top is set to -190px, a space of size 190 is made at the bottom. To fix it, set margin-bottom: -190px for that div.

Answer 3

A simpler solution is to style the outermost elements as follows

body
{
    padding: 0;
    margin: 0 auto;
    width: 700px; /* px is bad here, but I'm keeping things simple for now */
}

#container
{
    position: absolute;
    background: url(images/pixel_down.jpg);
    height: 100%;
}

and remove CSS positioning from all other elements. And why have you convoluted the nav bar code so much as to make it inaccessible instead of using a simple row of images?

You may also like to try to find a free host whose advertising doesn't screw up the layout. I believe http://www.webs.com/ is one such, though I'm not sure if it's changed since last time I looked.