title: Fluid width menu using CSS
body: <p>I have a horizontal CSS menu. The problem is when the user creates more than 5 menu items the li tabs move onto a new line. I dont want this to happen.</p>
  
  <p>How can I make it fluid width so if the user creates just 3 menu items then each tab increases in width so it fits full width?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
   &lt;div id="new-menu-lower"&gt;
    &lt;ul class="menuul"&gt;
     &lt;li class="menuli"&gt;
         &lt;a href="/test.aspx"&gt;Test&lt;/a&gt;
     &lt;/li&gt;
        &lt;li class="menuli"&gt;
         &lt;a href="/test.aspx"&gt;Test&lt;/a&gt;
     &lt;/li&gt;
        &lt;li class="menuli"&gt;
         &lt;a href="/test.aspx"&gt;Test&lt;/a&gt;
     &lt;/li&gt;
        &lt;li class="menuli"&gt;
         &lt;a href="/test.aspx"&gt;Test&lt;/a&gt;
     &lt;/li&gt;
        &lt;li class="menuli"&gt;
         &lt;a href="/test.aspx"&gt;Test&lt;/a&gt;
     &lt;/li&gt;
        &lt;li class="menuli"&gt;
         &lt;a href="/test.aspx"&gt;Test&lt;/a&gt;
     &lt;/li&gt;
        &lt;li class="menuli"&gt;
         &lt;a href="/test.aspx"&gt;Test&lt;/a&gt;
     &lt;/li&gt;
  
    &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div.container
  {
      clear: both;
      margin: 10px auto 0;
      width:960px;
      border:1px solid red;
      height:700px;
  }
  
  div#new-menu-lower {
      border-radius: 3px 3px 3px 3px;
      border-top: 0 solid lightgrey;
      margin: 0 8px 10px;
  }
  
  #new-menu-lower ul {
      border: 1px solid white;
      display: block;
      height: 27px;
  }
  
  #new-menu-lower ul li:first-child {
      border-left: 0 solid lightgrey !important;
      border-radius: 7px 0 0 7px;
  }
  
  #new-menu-lower ul li {
      background-image: url("http://i45.tinypic.com/16if95z.png");
      background-repeat: repeat;
      border-right: 0 solid lightgrey !important;
      float: left;
      height: 27px;
      padding-left: 10px;
      padding-right: 10px;
      text-align: center;
      width: 168px;
  }
  </code></pre>
  
  <p><strong>JSFIDDLE EXAMPLE:</strong> <a href="http://jsfiddle.net/rM9MW/" rel="nofollow">http://jsfiddle.net/rM9MW/</a></p>