Justified navigation buttons

Question

I'm trying to create the primary navigation menu for a website that will have a variable amount of primary menu items. The navigation bar is horizontal and has a width of 738px. I would like to have the leftmost item 18px from the left and the rightmost item 18px from the right edge of the element, with the other menu items spread evenly between them. I'm using a tableless layout.

So far I haven't been able to make it work exactly like I want. Setting margin: auto doesn't seem to help, and I can't keep the 18px margin on both sides using a table. One idea was to use text-align: justify but it doesn't justify single lines.

Is there a simple or less simple way of doing this, or am I going to have to ask the AD to relax his visual requirements?

Answer 1

Assuming:

<div id="nav">
  <div id="inner">
    <div>item one</div>
    <div>item two</div>
    <div>item three</div>
    <div>item four</div>
  </div>
</div>

use:

#inner { margin: 0 18px; overflow: auto; }
#inner div { width: 25%; float: left; }

This has two limitations:

1. It stretches each item to be the full available width rather than the required width. If you want the required width, you can use the leaf divs as containers for the content that will not stretch; and

2. You have to know the number of children in advance.

Answer 2

The html using an unordered list

<ul class="NavBar">
<li><a href="#" class="First">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#" class="Last">Item</a></li>
</ul>

And the CSS

.NavBar
{
display:block; margin:auto;
width:738px;
}    
.NavBar li
{
display:inline;
text-align:justify;
list-style:none;
width:140px;
}

.Navbar .First
{
margin-left:18px;
}

.Navbar .Last
{
margin-right:18px;
}

Answer 3

If the number of menu items is variable, I can't think of a purely CSS solution. You can use Javascript to compute the width of each item depending on how many there are and dynamically modify the CSS (this can be done very easily with a DOM/Javascript library like jQuery), with the caveat that a deactivated Javascript may ruin your layout.

Answer 4

if I understand your problem, that can help you a little bit/

html :

<ul class="lnkList">

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

<li><a href="#">Item</a></li>

</ul>

css :

ul.lnkList{display:block; float:left; margin:auto; width:708px; height:20px; padding:0px 15px;}

 `ul.lnkList li{list-style:none; display:block; float:left; 
        width:111px; margin:0px 3px;}`

 `ul.lnkList li a{display:block; float:left; width:111px;}`

its just a sample about what you can do if you have 6 blocks. its justified//