Right justify menu

Hi,
I am using a child theme to customize Twenty Eleven and I would like to have a right justified navigation menu that is listed in the correct order.
I understand that I need to have :

ul { float: right; }
li { float: left; }

for the menu to be listed right-justified in the correct order.

However when I set my ul to float: right the menu disappears and the content from below the menu extends to the top of the screen.

Below is the code from my child css. Any help would be appreciated. Thanks!

.main-navigation li {
    text-decoration: none;
    color: #333333;
    display: block;
    float: left;
    list-style: none outside none;
    margin-right: 10px;
    font-size: 16px;
}

.main-navigation li a {
    text-transform: uppercase;
    color: #333333;
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    transition: all 300ms ease-in-out 0s;
}