Horizontal Menu with a Dynamic Number of Elements Fit As 100% Evenly

by Drath

HTML

<p>Horizontal menu with a dynamic number of elements fit as 100% evenly</p>
<p>AKA Return of the Table... Styles!</p><br />

<div id="menu">
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4 (BIG TITLE!)</a></li>
        <li><a href="#">Menu 5</a></li>
    </ul>
</div>

CSS

body {
    text-align:center;
    margin:0 auto;
    width:500px;      
}

#menu {
    width:100%; 
    background:#999;  
    display:table;
}

#menu ul li {
    display:table-cell;      
}

#menu ul {
    display:table-row;      
}

#menu a {
    display:block;   
}