title: How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container
body: <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>