how to make a ul li css menu with variable space b

Question

The idea is to make a menu with a fixed amount of items. Each of the items must have a fixed padding on them to make them look decent when placing a border around them. (so far so good) But these items must be spread out in a div with a fixed size, spaced evenly - the items themselves won't be the same size as this is dependent on the text within these items.

What I can't figure out is how to make sure that the items are on 1 line with a dynamic (more or less) evenly spacing between them within a fixed div (in my case 1000px). The first item should be lined out to the left edge of the div. The last item should be lined out to the right edge of the div.

Below is what I have so far. This already puts the padding and border on it, but I can't set a margin: 0 auto on it, well I can, but it doesn't do anything. The main issue is that the spacing in between should be dynamic because the items tend to jump upon zooming the browser which in turn messes up the alignment of the outer items and even makes some items jump to the next line. That's why (zooming messes things up - especially with fixed widths) I'm reluctant to put an actual width on each of the items (I know I need a width to use margin: 0 auto properly, but even when I do use a width, it doesn't seem to do what I want it to do).

<div id="navigation">
    <ul>
        <li class="menu-1"><a href="" >Home</a></li>
        <li class="menu-2"><a href="" class="">Nieuws</a></li>
        <li class="menu-3"><a href="" class="">Producten</a></li>
        <li class="menu-4"><a href="" class="">Algemene informatie</a></li>
        <li class="menu-5"><a href="" class="">Promoties</a></li>
        <li class="menu-6"><a href="" class="">Algemene voorwaarden</a></li>
        <li class="menu-7"><a href="" class="">Contact</a></li>
    </ul>
</div>

#navigation ul {
    margin:0px;
    padding:0px;
    list-style:none;
    width:1000px;   
    display:block;
}

#navigation li {
    float: left;
    display:inline;
}

#navigation li a {
    padding:10px 15px 10px 15px;
    float:right;

    display: block;
    border: 0.1em solid #dcdce9;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

#navigation{
    width:100%;
}

Answer 1

Using table display modes: http://jsfiddle.net/pnUdp/1/

#navigation {
    margin:0px;
    padding:0px;
    display:table;
    width:1000px;
    border-collapse: collapse;
}

#navigation ul{
    margin:0px;
    padding:0px;
    list-style:none;
    display:table-row-group;
}

#navigation li{
    display:table-cell;
    border: 0.1em solid #dcdce9;
    vertical-align: middle;
}

#navigation li a{
    padding:10px 15px 10px 15px;
    display:block;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

I am unsure of how cross-browser this is though...

Answer 2

The simplest would be to use a table instead of li items : you can define the table width and the cell widths will be automatically computed.

You can choose to give them width in % to have them equal or decide to let them proportionally adapted.

No need to be afraid of tables : sometimes they do the job simpler.