Problem with reversal of menu when floated to the right in CSS

Question

I've got a div that is set to 100% and inside that another div which is centred and set to 883px.

The navigation is a list but if I apply the float:right element to this element it reversed the order of the list. Sure I could change the order in the code but there must be a better way?

<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>

And the 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;
}

Can anyone help show me the error of my ways?

Answer 1

Floating to the right reverses the elements. This is the expected behavior.

If you want the menu aligned to the right, then you need to make ul element floating to the right but the li elements inside, must have a float left.

#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;
  float: right;
}

#navigation li {
  float: left;
  padding: 0px 10px;
}

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

In this case, the menu still doesn't appear aligned to the right because you specified width:883px; to the ul element. If you want it aligned to the right then simply remove this width.