div layout diferente 2 coluna

Question

Este é diferente do layout de coluna simples 2.

Eu preciso ter essa html:

<div class="menu">
    <div class="right">One</div>
    <div>Three</div>
    <div>Four</div>
    <div class="right">Two</div>
    <div class="right">Two</div>
    <div>Four</div>
    <div class="right">Two</div>
</div>

O menu classe div tem uma largura estática, eu preciso dos divs dentro dele para ir em uma coluna da direita, e os divs normais para ficar como estão.

Aqui está o CSS Eu tenho até agora, mas eu não consigo descobrir isso ainda:

div.menu {
    width: 550px;
}
div.menu div {
    float: left;
    width: 200px;
}
div.menu div.right {
    float: right;
}

Os divs dentro tem ordem aleatória, então não posso colocá-los em uma div e flutuar isso.

Aqui está um esboço do que o código HTML acima deve ser parecido:

alt texto http://img102.imageshack.us/img102/4494/flytc3 .jpg

Answer 1

Tente:

div.menu div {
    float: left;
    clear: left;
}
div.menu div.right {
    float: right;
    clear: right;
}

Answer 2

Eu não consigo descobrir o que você está tentando alcançar. Poderia, por favor criar algum esboço básico em MS Paint ou algo para que pudéssemos ajudá-lo?

Editar :. Talvez eu não entender alguma coisa aqui, mas este é exatamente como parece em minha janela Chrome (bem, além dos paddings)