html - CSS float right without changing order? -


there similar questions already, none of fixes worked me. want float <li> menu right, can't correctly.

html

 <div id="topnav"><ul class="topnavlinks"><li class="menu-474 first"><a href="/" title="home page">home</a></li>  <li class="menu-540 active-trail active"><a href="/our-company" title="" class="active">our company</a></li>  <li class="menu-541"><a href="/news_blog" title="">blog</a></li>  <li class="menu-930"><a href="/faq" title="frequently asked questions">faq</a></li>  <li class="menu-900 last"><a href="/contact" title="contact">contact</a></li>  </ul></div> 

css

#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 { color:#fff; text-decoration:none; padding:0px 27px; } 

currently doesn't float right @ all, , other variations have gotten float right, reversed order.

try adding additional container

html

<div id="topnav"><div class="cont"><ul class="topnavlinks"><li class="menu-474 first"><a href="/" title="home page">home</a></li>  <li class="menu-540 active-trail active"><a href="/our-company" title="" class="active">our company</a></li>  <li class="menu-541"><a href="/news_blog" title="">blog</a></li>  <li class="menu-930"><a href="/faq" title="frequently asked questions">faq</a></li>  <li class="menu-900 last"><a href="/contact" title="contact">contact</a></li> </ul></div></div> 

css

.cont { width:980px; margin:0px auto; } #topnav { width:100%; height:14px; background:#b8b8b8; border-bottom:1px solid #989898; } .topnavlinks ul { float:right;  } .topnavlinks li { float:left;  } .topnavlinks { color:#fff; text-decoration:none; padding:0px 27px; } 

Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c++ - Using OpenSSL in a multi-threaded application -

All overlapping substrings matching a java regex -