title: centered nav with flexible left and right widths - percentage padding does not work
body: <p><strong>UPDATE:</strong> Simplified HTML &amp; CSS as per one of the answers below.  The problem is still occurring however.</p>
  
  <p>I have a working nav that is something like this:</p>
  
  <pre><code>                item11item2item3    Centered    item4item5item6
  </code></pre>
  
  <p>I want to add padding between the items so it looks like this:</p>
  
  <pre><code>       item1     item2     item3    Centered    item4     item5     item6
  </code></pre>
  
  <p>The items on the <em>left</em> are <em>right-justified</em>.  The items on the <em>right</em> are <em>left-justified</em>.</p>
  
  <p><strong>The Problem</strong></p>
  
  <ul>
  <li>If I use <code>float: right;</code> to justify the list, I get <code>item3   item2   item1</code>.</li>
  <li>If I use <code>float: left;</code> and set the container width to <code>auto</code>, I can get the correct layout, but only when I use <code>px</code> padding.</li>
  <li><p>When I use <code>%</code> padding like <code>padding-left: 3%;</code> it breaks and looks like this:</p>
  
  <pre><code>          item1     item2       Centered    item4     item5     item6
            item3
  </code></pre></li>
  </ul>
  
  <p>Here's my <strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;nav&gt;
          &lt;ul class="left"&gt;
              &lt;li&gt;Item 1&lt;/li&gt;
              &lt;li&gt;Item 2&lt;/li&gt;
              &lt;li&gt;Item 3&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="center"&gt;
              &lt;li&gt;Centered&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="right"&gt;
              &lt;li&gt;Item 4&lt;/li&gt;
              &lt;li&gt;Item 5&lt;/li&gt;
              &lt;li&gt;Item 6&lt;/li&gt;
          &lt;/ul&gt;   
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my <strong>CSS</strong>:</p>
  
  <pre><code>/* Reset */
  
  html, body, nav, li {
    margin: 0; padding: 0; border: 0;
  }
  
  li {
    list-style-type: none;
    list-style-position: outside;
  }
  
  /* Styles */
  
  .container {
    width: 100%;
    height: auto;
  }
  
  nav {
      width: 80%;
      margin: 0 auto;
  }
  
  nav &gt; ul.left {
      position: absolute;
      right: 55%;
  }
  
  nav &gt; ul.left &gt; li {
      float: left;
      padding-right: 5%;
  }
  
  .center {
      position: absolute;
      left: 45%;
      width: 10%;
  }
  
  .center li {
      text-align: center;
  }
  
  nav &gt; ul.right {
      position: absolute;
      left: 55%;
      width: 45%;
  }
  
  nav &gt; ul.right &gt; li {
      float: left;
      padding-left: 5%;
  }
  </code></pre>
  
  <p><strong>Notes:</strong></p>
  
  <ul>
  <li>I'm using absolute positioning &amp; containers in order to keep "Centered" perfectly centered even if the widths of the left and right nav items aren't identical.</li>
  <li>I'm using % based widths because it's a flexible layout (reponsive)</li>
  <li>the above code works ok, but I'd really like to make the padding percentage based so it's flexible.</li>
  </ul>
  
  <p>So it <em>appears</em> that the <code>li-container</code> div inherits the width correctly and accounts for the padding when I use pixels, but not when I use percentages.  Is this typical behavior?  What is the solution?</p>
  
  <p><a href="http://jsfiddle.net/timshutes/4snNw/5/" rel="nofollow">Here's a jsFiddle</a> in case you want to play around with it.</p>
  
  <p><strong>ADDITIONAL UPDATE:</strong></p>
  
  <p>The chief problem seems to be the need to have the "left" items right-justified.  If I use <code>float:right</code> then I get reverse order, which isn't good.  If I use <code>float:left</code> on the left items, then the order is correct, but I need to remove explicit width from the container, or the items aren't right-justified.  Removing explicit container width causes the issue I'm experiencing.</p>