Question

Trying to have a horizontal navigation bar that has equally spaced links spanning across the entire page. I have 6 links, so I figured that each one would have a 16.67% width approximately, but that doesnt work.

16.5% works, until you resize the page, at which point the last item in the nav bar drops down to the next line. Is there a way that I can prevent this so that they are centered at all times and in all window sizes?

And is there a way that I can prevent the user from resizing the window to a size that would cause the links to either overlap or not be fully displayed?

Here’s my code so far:

#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li      {width:100%}
li a    {padding: 6px 3px; float:left; width:16.5%; text-align:center;}

<ul id='navbar'>
<li><a href='#'> 1 </a></li>
<li><a href='#'> 2 </a></li>
<li><a href='#'> 3 </a></li>
<li><a href='#'> 4 </a></li>
<li><a href='#'> 5 </a></li>
<li><a href='#'> 6 </a></li>
</ul>

Answer 1

In Safari, it’s always screwed up until I remove your left/right padding. Left/right padding is not needed since the spacing is already determined by the width and other CSS.

JSFiddle

#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li      {width:100%}
li a    {padding: 6px 0; float:left; width:16.5%; text-align:center;}

I’m not sure IE is going to be happy about the fractional width percentage, so try this.

JSFiddle

#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li      {width:100%}
li a    {padding: 6px 0; float:left; width:16%; text-align:center;}