Flexible navigation with css

by Ben Gillbanks

HTML

<div class="wrapper">
    <p>Trying to make a navigation that fills the available space whilst keeping variable width buttons</p>
    <p>Needs to work reliably in all modern browsers (ie7+, chrome, firefox etc)</p>
    <p><strong>Notice</strong> there are 3 separate nav lists - this works with any number of buttons</p>
    <div class="sizer"></div>
    <nav>
        <ul>
        <li class="small"><a href="#">H</a></li>
        <li><a href="#">Multiplayer</a></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Platform</a></li>
        <li><a href="#">Motorsports</a></li>
        <li><a href="#">3D</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Motorsports</a></li>
        <li><a href="#">3D</a></li>
        <li><a href="#">Sports</a></li>
        <li class="small"><a href="#">&rsaquo;</a></li>    
        </ul>
    </nav>

    <nav>
        <ul>
        <li class="small"><a href="#">H</a></li>
        <li><a href="#">Multiplayer</a></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Platform</a></li>
        <li><a href="#">Motorsports</a></li>
        <li><a href="#">3D</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Motorsports</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Motorsports</a></li>
        <li><a href="#">3D</a></li>
        <li><a href="#">Sports</a></li>
        <li class="small"><a href="#">&rsaquo;</a></li>    
        </ul>
    </nav>

    
    <nav>
        <ul>
        <li><a href="#">Platform</a></li>
        <li><a href="#">Motorsports</a></li>
        <li><a href="#">3D</a></li>
        <li><a href="#">Sports</a></li>
        </ul>
    </nav>
</div>

CSS

* {
    margin:0;
    padding:0;
}
body, html
{
    font:12px tahoma;
    background:#eee;
}

p {
    margin:0 0 10px 0;
}

strong {
    font-weight:bold;  
}

nav {
    height:50px;

}

nav ul {
display: flex;
        width: 960px;
}

nav li {
    list-style-type:none;
    padding-right:5px;
    flex-grow:1;
}

nav li:last-child {
    padding:0;
}

.wrapper {
    width:960px;
    background:#fff;
    display:block;
    height:250px;
    padding:20px;
}

.sizer {
    display:block;
    padding:5px;
    background:#000;
    margin:0 0 20px 0;
}

nav a
{
    display:block;
    font-weight:bold;
    white-space: nowrap;
    background-color: #ccc;
    border: 1px solid #bbb;
    padding: 0 9px;
    text-decoration: none;
    color: #036;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    border-radius: 5px;
    line-height:28px;
}

nav li.small {
    flex-grow:0;
}

nav a:hover
{
    background-color: #ddd;
}