Float not working as expected

Question

I have a navigation box, and the "Contact" element isn't fully right justified despite float being set to right.

<div id="navwrapper">
    <ul>
        <li class="single">Home</li>
        <li class="double" id="left">About</li>
        <li class="double" id="right">Contact</li>
        <li class="single">Book</li>
    </ul>
</div>

And the CSS

#right {
    float:right;
}

Other questions seem to suggest swapping the left and right elements over to get the desired effect, but that didn't work.

jsFiddle

Answer 1

You were missing overflow:hidden on your ul element.

Check this working jsFiddle.

overflow:hidden is recommended on the parent of floating elements. It forces the parent to wrap around all of them, thus preventing weird behaviour as you were experiencing..

Answer 2

I belive you are searching for margin but in minus position, for example:

#right {
float: right;
margin: 0 -3px 0;
}

That will fix your issue

Fiddle: http://jsfiddle.net/TQFzS/4/