StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
text
Body
copied!<p>I'd like to stretch 6 nav items evenly across a 900px container, with an even amount of white space between. For instance...</p> <pre><code>---| 900px Container |--- ---| HOME ABOUT BASIC SERVICES SPECIALTY SERVICES OUR STAFF CONTACT US |--- </code></pre> <p>Currently, the best method I can find to do this is the following:</p> <pre><code>nav ul { width: 900px; margin: 0 auto; } nav li { line-height: 87px; float: left; text-align: center; width: 150px; } </code></pre> <p>The PROBLEM with this is two fold. First of all, it doesn't truly justify it, but rather spreads the li tags evenly throughout the ul tag.. creating uneven white-space between smaller menu items like "HOME" or "ABOUT" and larger ones like "BASIC SERVICES".</p> <p>The second problem is that the layout breaks if a nav item is larger than 150px, which SPECIALTY SERVICES is - even though there is more than enough space for the whole nav.</p> <p>Can anyone solve this for me? I've been scouring the web for solutions, and they all seem to come up short. CSS / HTML only if possible...</p> <p>Thanks!</p> <p>UPDATE (7/29/13): Using table-cell is the best modern way to implement this layout. See felix's answer below. The <code>table cell</code> property <a href="http://caniuse.com/#search=table-cell" rel="noreferrer">works on 94% of browsers</a> currently. You'll have to do something about IE7 and below, but otherwise should be ok.</p> <p>UPDATE (7/30/13): Unfortunately, there is a webkit bug that impacts this if you're combining this layout with Media Queries. For now you'll have to avoid changing the 'display' property. <a href="https://bugs.webkit.org/show_bug.cgi?id=53166" rel="noreferrer">See Webkit Bug.</a></p> <p>UPDATE (7/25/14): There is a better solution to this below now involving text-align: justify. Using this is simpler and you'll avoid the Webkit bug.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload