title: make some menu links float right and other left
body: <p>I have this HTML code and CSS for a horizontal menu. It displays the links (boxes) from left to right floated to the left of the page.</p>
  
  <p>What is the best way to make one of the links (boxes) display to float to the right of the page? </p>
  
  <p>I have tried using float right with the below CSS copied as navigation-right and changed the HTML as needed but that did not work.</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div class="navigation-left"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="&lt;?php echo $website_url; ?&gt;"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="&lt;?php echo $website_url; ?&gt;"&gt;SAF&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="&lt;?php echo $website_url; ?&gt;"&gt;Acudetox&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>.navigation-left {
      height:auto;
      list-style:none;
      margin-right:40px;
      display:inline;
  }
  .navigation-left li{
      width:200px;
      height:25px;
      margin:5px;
      padding:5px;
      background-color:#666666;
      border:none;
      text-align:center;
      display:inline-block;
  }
  .navigation-left li:hover{
      background-color:#f36f25;
      color:#FFFFFF;
  }
  .navigation-left li a{
      font-family:Calibri, Arial;
      font-size:18px;
      font-weight:bold;
      color:#ffffff;
      text-decoration:none;
  }
  .navigation-left li.current {
      background-color:#F36F25;
  }
  .navigation-left li.current a {
      color:#FFFFFF;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/W2x5y/" rel="nofollow">http://jsfiddle.net/W2x5y/</a></p>