html - Multiple lists in the same navigation bar -

i'm trying understand how stumbleupons navigationbar works recreating it.

i'm using 3 lists in 1 this:

<nav role="navigation">         <ul id="rightnav">             <li></li><!--              --><li></li><!--              --><li></li>         </ul>         <ul id="leftnav">             <li></li><!--              --><li></li><!--              --><li></li>         </ul>         <ul id="centernav">             <li id="dislike">&nbsp;</li><!--              --><li id="stumble">stumble</li><!--              --><li id="like">&nbsp;</li>         </ul>     </nav> 

this i've got far: http://jsfiddle.net/litari/yct4d/1/

the 3 lists wont line propperly no matter try. i'm quite new css it's obvious i'm missing.

i appreciate additional comments on css. if sucks, let me know (and let me know why. want better!) :) thanks!

try this

fiddle

ul {    list-style-type: none;  } nav{     height: 30px;     top: 0;     right: 0;     left: 0;     position: fixed;     width: 100%;     background-color: red;     text-align: center; } #lefttnav{     float:left; } #centernav{     display:inline-block;    } #rightnav{     float:right; }