title: Percent-width based horizontal navigation
body: <p>I need help figuring out how to build a horizontal ul-li-based navigation.
  The tricky part with it is, that <strong>all</strong> sizes have to be in percent. No px, no em.
  Furthermore all list items should be equal width and fill the whole ul.
  Another problem with this, at least with my attempts, is that there are 7 list items, which give me an ugly 14.28...% for each of them - which in my attempts so far resulted in the main content area being around 1-2px off, depending on the browser window size.</p>
  
  <p>Here's a sketch of the layout I'm working on:
  <a href="http://img.flashtux.org/img1332a1329f8fxfc69fca8.png" rel="nofollow">link to the image (since I don't have enough reputation yet)</a></p>
  
  <p>Where I am at the moment:</p>
  
  <pre><code>&lt;ul id="#main_menu"&gt;
      &lt;li class="main_menu_li"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;&lt;li class="main_menu_li"&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;&lt;li class="main_menu_li"&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;&lt;li class="main_menu_li"&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;&lt;li class="main_menu_li"&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt;&lt;li class="main_menu_li"&gt;&lt;a href="#"&gt;Six&lt;/a&gt;&lt;/li&gt;&lt;li class="main_menu_li"&gt;&lt;a href="#"&gt;Seven&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  #main_menu{
  width: 100%;
  list-style: none;
  margin: auto 0;
  padding: 0;
  text-align: left;
  overflow: auto;
  }
  
  .main_menu_li{
  display: inline;
  text-align: center;
  margin: 0;
  padding: 0;
  width: 14.28%;
  }
  
  .main_menu_li&gt;a{
  text-decoration: none;
  border: 1px solid #fff;
  width: auto;
  display: inline-block;
  }
  </code></pre>
  
  <p>Problem with this code is, that there's still room to the right within the ul.</p>
  
  <p>I hope you can help me! Thanks in advance for your efforts!</p>