Заказать различные элементы, плавающие справа

У меня есть заголовок с навигационной панелью, плавающей справа, и изображение выхода, которое должно также плавать вправо, находясь справа от панели навигации.

Даже когда оба плавают вправо, бар всегда занимает последнее место, которое должно быть для выходного изображения.

Вот рабочий пример (возьмите "X" как изображение выхода): http://jsfiddle.net/c2ccB/

HTML построено позиционированием сначала навигационной панели, а затем выход из системы:

<nav class="nav">
    <ul>
        ...........

    </ul>
</nav>
<div class="logout"></div>

И стиль имеет плавающие права (см. Jsfiddle для расширенной версии стиля):

nav{
    float: right;
    background: -webkit-linear-gradient(bottom, #DFDFDF , white 80%);
    border-radius: 5px;
    border:  1px solid #9F9D9D;
    margin: 42px 80px 0 0;
}

.logout{
    background-image: url(images/logout.png);
    height: 50px;
    width: 50px;
    float: right;
}