title: CSS: Fixed with horizontal menu, with variable width tabs, using ul
body: <p>I have a horizontal menu. The markup looks like this:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
     &lt;li&gt;Item 1&lt;/li&gt;
     &lt;li&gt;Longer Item 2&lt;/li&gt;
     &lt;li&gt;Item 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Submenus and suckerfish dropdowns will come later.</p>
  
  <p>The <em>ul</em> needs to span the width of the page (e.g. 100% or 1000px).</p>
  
  <p>The <em>lis</em> should vary in width based on their content.</p>
  
  <p>So the result would look like this:</p>
  
  <pre><code>-----------------100% of page------------
  |--Item 1--|--Longer item 2--|--Item 3--|
  </code></pre>
  
  <p>Now it is easy to do this by fixing a width for each li tag, but because the menu will be CMS driven I need to allow the width of the tabs to vary automatically. With a <em>table</em> this would be trivial, but I can't think of a way to do it with a <em>ul</em>.</p>