Need help with navigation bar

[ellybean]

I just made a top, horizontal navbar for my website and got it to work - mostly :D
The thing I need help with is that my tabs do not fit all the way across the screen. Right now I have them in a cell in a table, and this cell spans all across the table and screen. And I have about 5 tabs. The 5 tabs do not go all the way across when the screen is maximized, which just looks dumb.
But when I add more tabs, to fill up the whole width of the cell and screen, and then minimize the screen, the tabs do not have enough room. So they break to the next line, which looks horrid!

So my question is, how can I make it so I can fill up my cell with as many tabs as I need, and make it as wide as my entire cell, and no matter how big the browser window is, it will fit?

Here's my markup:


<div id="header">
<ul>
<li><a style="text-decoration:none" href="#">Home</a></li>
<li id="current"><a style="text-decoration:none" href="#">About BNG</a></li>
<li><a style="text-decoration:none" href="#">Meet Elle</a></li>
<li><a style="text-decoration:none" href="#">Buy the Book</a></li>
<li><a style="text-decoration:none" href="#">Expert Advice</a></li>
<li><a style="text-decoration:none" href="#">FAQs</a></li>
<li><a style="text-decoration:none" href="#">Contact</a></li>

</ul>
</div>

Here's my CSS:


#header {float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("norm_left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url("norm_right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:url("norm_left_on.gif")…
}
#header #current a {
background-image:url("norm_right_on.gif"…
padding-bottom:5px;
}