What is wrong with my CSS menu?

Question

The result is: http://img198.imageshack.us/img198/746/93502273.jpg

You can see the obvious "whitespace" on the side.

I have:

<div id="nav">
    <ul>
        <li id="n-home"><a href="/">Home</a></li>
        <li id="n-search"><a href="/search/">Search</a></li>
        <li id="n-advertisers"><a href="/advertisers/">Advertisers</a></li>
        <li id="n-something"><a href="/something/">Something</a></li>
        <li id="n-contact"><a href="/contact/">Contact</a></li>
    </ul>
</div>

and

/* Navigation
---------------------------------------------------------- */

#nav {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    }
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #f5f5f5;
    width: 100%;
    }
#nav li {
    float: left;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5; 
    }
#nav li a {
    float: left;
    margin: 0 1px 0 0;
    padding: 4px 9px;
    font-size: 100%;
    font-weight: normal;
    text-decoration: none;
    color: #111;
    }

#nav li a:hover {
    text-decoration: underline;
    }

Answer 1

Ok, so you want the background of your Navigation Bar to stretch across the whole of your page, if I understand correctly.

First, you'd need to add width:100%; to your #nav declaration in your CSS file. Second, you might have to add background-color: #f5f5f5; as well, to keep the color consistency across the whole div, otherwise you won't be able to tell that it's stretching the whole way across.

Answer 2

try.

#nav li {
    display:inline;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5; 
}

#nav li a {
    display:inline-block;
    margin: 0 1px 0 0;
    padding: 4px 9px;
    font-size: 100%;
    font-weight: normal;
    text-decoration: none;
    color: #111;
}

when you float items, the wrapper (in this case ul) cannot wrap around to display the background.

Another alternative is to do add to make the html like this:

<div id="nav">
    <ul>
        <li id="n-home"><a href="/">Home</a></li>
        <li id="n-search"><a href="/search/">Search</a></li>
        <li id="n-advertisers"><a href="/advertisers/">Advertisers</a></li>
        <li id="n-something"><a href="/something/">Something</a></li>
        <li id="n-contact"><a href="/contact/">Contact</a></li>
        <li class="clear"> </li>
    </ul>
</div>

and add this to the css:

#nav li.clear {
    float:none;
    clear:both;
    height:1px;
}

Answer 3

The problem is that your <ul> technically doesn't contain any content, as all the <li> elements are floating. This means that the <ul> doesn't really have an "inside" to render.

The solution is as simple as adding overflow:hidden to your #nav ul style. This is a clever work-around to what has been termed the clearfix hack.

Here's an interesting blog post about the clearfix issue if you want to read more about it.