Using display: table to Create Full Width Navigations
Published Saturday, November 03, 2007 in (X)HTML, CSS, Semantics
Sometimes you need a navigation to span the entire width of its parent:
Because all types of navigations are nothing but lists of links they should always be marked up with the unordered list element (ul) with each navigation-item in its own li-element.
A very common way to display the list of links horizontally is to float each li-element to the left which will make them all appear on one row, but the total width of a row of floated elements is determined by the elements' margin, padding, border and contents so you have no real control over the width of your navigation-bar (unless, of course, you set a fixed width to each li).
Using the CSS display-property together with its table, table-row and table-cell values you can make an unordered list behave like a table and easily make the navigation-items take up the full width of your site.
The following markup:
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Content</a></li>
</ul>
</div>
And this CSS:
#navigation {
display: table;
width: 100%; /* tables are not 100% by default like block-level elements */
border-spacing: 0;
border-collapse: collapse:
}
#navigation ul {
display: table-row;
}
#navigation ul li {
display: table-cell;
border: 1px solid #000;
}
Will do the trick. I've kept the styling as simple as possible, but to make your navigation a bit fancier you'll probably want to style the lis a little more.
Of course IE6 (dunno 'bout 7) doesn't support any of this but I've given up on that piece of shit ages ago, and I hope you have too. If everybody could just stop caring about IE people would eventually switch to a proper browser. I think we should encourage IE-users to switch and stop fixing things for that browser and it will happen sooner rather than later.
