Problème de l'inversion de menu lorsque flottait vers la droite dans le CSS

J'ai un div qui est à 100% et à l'intérieur un autre div qui est centré et fixé à 883px.

La navigation est une liste, mais si j'applique le float:right élément de cet élément, il inversé l'ordre de la liste. Sûr que je pourrais modifier l'ordre dans le code, mais il doit y avoir une meilleure façon?

<div id="navigation"><!-- START NAVIGATION -->
    <ul class="navigation">
        <li><a href="#" title="" alt="" class="current">home</a></li>
        <li><a href="#" title="" alt=""><img src="images/navline.png" align="right">portfolio</a></li>
        <li><a href="#" title="" alt="">blog</a></li>
        <li><a href="#" title="" alt="">get in touch</a></li>
    </ul>
</div>
<div id="border"></div><!-- END NAVIGATION -->
<div style="clear:both"></div>

Et le CSS...

#navigation {
width:100%;
background-color:#383a3c;
height:43px;
}

#navigation ul {
width:883px;
margin:0px auto;
}

ul.navigation {
font-family:'ChunkFiveRegular', Arial, sans-serif;
font-size:18px;
}

#navigation li a {
display:block;
margin:13px 0px 0px 0px;
text-decoration:none;
color:#8cd8db;
float:right;
}

Quelqu'un peut-il aider à me montrer l'erreur de mes moyens?

OriginalL'auteur Stonemonkey | 2011-03-15