title: CSS float right without changing order?
body: <p>There are some similar questions like this already, but none of those fixes worked for me. I want to float a <code>&lt;li&gt;</code> menu to the right, but I can't get it to do it correctly. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div id="topnav"&gt;&lt;ul class="topnavlinks"&gt;&lt;li class="menu-474 first"&gt;&lt;a href="/" title="Home page"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li class="menu-540 active-trail active"&gt;&lt;a href="/our-company" title="" class="active"&gt;Our company&lt;/a&gt;&lt;/li&gt;
   &lt;li class="menu-541"&gt;&lt;a href="/news_blog" title=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
   &lt;li class="menu-930"&gt;&lt;a href="/faq" title="Frequently Asked Questions"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
   &lt;li class="menu-900 last"&gt;&lt;a href="/contact" title="Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#topnav { width:100%; height:14px; background:#b8b8b8; border-bottom:1px solid #989898; }
  .topnavlinks { width:980px; margin:0px auto; }
  .topnavlinks ul { float:right;  }
  .topnavlinks li { float:left;  }
  .topnavlinks a { color:#fff; text-decoration:none; padding:0px 27px; }
  </code></pre>
  
  <p>Currently it doesn't float to the right at all, and with some other variations I have gotten it to float right, only with reversed order.</p>