title: HTML & CSS Horizontal menu with items on left & right
body: <p>I'm building an horizontal menu in HTML+CSS. The current result is fine, except I want to have some items on the left, and others on the right. I couldn't find useful result on Google with such common keywords so I'm asking on SO.</p>
  
  <p>Here's my code so far:</p>
  
  <pre><code>#menu
  {
      background-color: #383838;
      height: 65px;
      margin-bottom: 20px;
  }
  
  #menu ul li
  {
      float: left;
  }
  
  &lt;div id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;Link 1&lt;/li&gt;
          &lt;li&gt;Link 2&lt;/li&gt;
          &lt;li&gt;Link 3&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to have Link 3 on the right, so the space between link 2 and 3 should be filled at maximum. I don't want a filler <code>&lt;li&gt;</code> tag, but instead apply a class to the last <code>&lt;li&gt;</code> on the left, or the first <code>&lt;li&gt;</code> on the right. Don't want to adjust the width as I've a :hover background color changing effet on the links. I suppose margin or padding should do the trick but I can't manage to find how.</p>
  
  <p>Any clue?</p>