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

September 6th, 2012

Yikes, that title is a mouthful. So why would one need a menu that has elements fit as 100%? Well, for aesthetic reasons primarily. Unfortunately (fortunately), since tables are no longer around, this has been a big issue for some web designers – especially for those who design for content management platforms or sites that have a menu that changes a lot. Sure, it’s easy to hard code widths in for each menu, but this breaks each time you want to add or remove a item from your menu. Here’s the solution:

Demo

Code

HTML

<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;   
}

As you can see, this method uses some style-trickery to mimic the functionality of tables within a menu list. Menu #4 showcases the great flexibility this method offers. So go ahead, add menu items, remove some, make them big and small – and most importantly, never hard code widths again.