4 tabs of 25% each, table-cell on list-items

by PhilippeVay

HTML

<ul id="nav">
    <li><a href="#">One</a></li>

<!-- whatever whitespace between tabs -->

<li><a href="#"> Second</a></li>
    <li><a href="#">Third</a></li><li><a href="#">Fourth and last, so large that... worst case</a></li>
    </ul>

CSS

ul {
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}
#nav {
    display: table;
    table-layout: fixed;
    text-align: center;
}
#nav li {
    display: table-cell;
    width: 25%;
    padding-right: 1px;
    height: auto;
    vertical-align: bottom;
}
#nav a {
    display: block;
    min-height: 100%;
    padding: 4px 10px;
    background-color: #222;
    color: white;
    border-radius: 6px 6px 0 0;
}

JavaScript

/* http://stackoverflow.com/questions/12019386/html-css-how-to-create-four-equal-size-tabs-that-fill-100-width/12019417 */