Navigation Header in CSS

I've always done nav bars in tables and want to start doing them in CSS. I have a header I've created in CSS but I have a question I can't answer anywhere. I'm sure it is a newbie question, but here goes.

How do I make a display: inline; list show 100% width on the browser? Even when resized? Can I do this?

Here is my HTML code.

<div id="navcontainer" align="center">
<ul id="navlist">
<li class=#navlist li a#current><a href="#">WIDGETS</a></li>
<li class="header"><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a>
</ul>
</div>
<div id="navcontainer" align="center">
<ul id="navlist2">
<li class=#navlist li a#current>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a></li>
<li><a href="#">WIDGETS</a>
<hr align="center">
<br>
</li>
</ul>
</div>

Here is the CSS
<!--
#navlist
{
padding: 0px 0;
margin-left: 0;
font: bold 11px Verdana, sans-serif;
background: #EED;
}

#navlist2
{
padding: 0px 0;
margin-left: 0;
font: bold 9px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist2 li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 4px .5em;
margin-left: 1px;
border: 0px solid #778;
border-bottom: none;
background: #003399;
text-decoration: none;
}

#navlist2 li a
{
padding: 4px .5em;
margin-left: 1px;
border: 1px solid #778;
border-bottom: none;
background: #EED;
text-decoration: none;
}

#navlist li a:link { color: white; }
#navlist li a:visited { color: white; }
#navlist2 li a:link { color: #448; }
#navlist2 li a:visited { color: #448; }

#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#navlist2 li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#navlist li a#current
{
background: white;
border-bottom: 1px solid white;<br
}

#navlist2 li a#current
{
background: white;
border-bottom: 1px solid white;
}

-->

Let me know what you think. Any comments on what I am doing wrong? Thanks!

Navigation Header in CSS

How Do I Make it 100% width?

wiskur

Span

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week