title: Ul table like in css
body: <p>I am suffering from creating nice menus with ul and li items. e.g. when I have only 4 item menu I give them same width 20% and it never breaks, same it works even for 6 item menu I give them 16,66666% width which CSS supports. But now there is a problem, this works only for items which can have same width, what I am looking for is solution for different width items and there is a condition, container must be every time 100% or 1000px (simply full width) and li´s cannot overflow container and container must be centered like:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;ul&gt;
       &lt;li&gt;Item1&lt;/li&gt;
       &lt;li&gt;Longnameitem 2&lt;/li&gt;
       &lt;li&gt;it3&lt;/li&gt;
       &lt;li&gt;SuperlongnameItem 4&lt;/li&gt;
       &lt;li&gt;Item5&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Normally my CSS would be like:</p>
  
  <pre><code>.container {
      position: relative;
      margin: 0 auto;
      width: 1000px;
      height: 30px;
  }
  .container ul {
      position: relative;
      width: 100%;
      height: 30px;
  }
  .container ul li {
      position: relative;
      width: 20%;
      display: block;
      float: left;
      margin: 0px;
  }
  </code></pre>
  
  <p>This works fine, but I need dynamic width for each li "table like", any ideas? tricks? table-cell CSS tricks? or other? (If there is a mistake, ignore it, I just typed it for example)</p>
  
  <p><a href="http://jsfiddle.net/fUatw/" rel="nofollow noreferrer">JSFiddle</a></p>