title: Horizontal Menu ul align right and align left
body: <p>I've searched through everything and can't seem to find an exact fix for this.  It seems pretty simple but I've been beating my head against a wall lately trying to get it just right.</p>
  
  <p>I have a simple horizontal menu on a website.  I am using an UL to make it all work. Here is my code:</p>
  
  <pre><code>&gt; &lt;div id="nav"&gt;
  &gt;           &lt;ul&gt;
  &gt;                 &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &gt;                 &lt;li&gt;&lt;a href="#"&gt;company&lt;/a&gt;&lt;/li&gt;
  &gt;                 &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
  &gt;                 &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
  &gt;                 &lt;li&gt;&lt;a href="#"&gt;Involvement&lt;/a&gt;&lt;/li&gt;
  &gt;                 &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &gt;                 &lt;li class="right"&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &gt;             &lt;/ul&gt;
  &gt;         &lt;/div&gt; &lt;!-- End Nav --&gt;
  </code></pre>
  
  <p>My Css is as follows:</p>
  
  <pre><code>    #nav ul{
      width:980px;
      margin:0;
      padding:0;
      border:1px solid red;
  }
  #nav ul li{ float:left;color:#FFF}
  
  #nav ul li a {display:block;padding:5px 62px 0 0px; text-decoration:none; color:#FFF}
  #nav ul li.right{float:right;margin-right: -30px;
  }
  </code></pre>
  
  <p>The Problem I am having is that the last item will align right but now there is a huge space between the second to last tab and the last tab.  This is because of the padding left I have in the li a portion.  I just want the first text to align left and the last text to align right and the others in between to have consistent space.  You can see the issue here:http://jsfiddle.net/nathan1342/sPZG9/ </p>
  
  <p>Any help would be very much appreciated!!</p>
  
  <p>Thanks!</p>