title: CSS menu even spacing and sizing
body: <p>I've been wrecking my brain trying to get a navigation menu with properly sized dynamic tabs/buttons working.</p>
  
  <p>So to explain better what I have is the following setup.</p>
  
  <pre><code>&lt;div class="main-nav"&gt;
  
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;button 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;button 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;button 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;button 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Now the main-nav has a fixed width. I'm trying to get the buttons to fill up the full width of the nav. I'm trying to do this preferably without javascript. I've tried a few different things but it doesn't seem to be working cross browser. Specifically ie :( </p>
  
  <p>Has anyone achieved this? or can point me in the right direction?</p>
  
  <p>Thanks in advance.</p>