Diseño de columna div 2 diferente

Question

Esto es diferente al diseño simple de 2 columnas.

Necesito tener este 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>

El menú de clase div tiene un ancho estático, necesito los divs dentro de él para ir en una columna derecha, y los divs normales para permanecer como están.

Aquí está el CSS que obtuve hasta ahora, pero todavía no puedo entenderlo:

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

Los divs en el interior tienen un orden aleatorio, por lo que no puedo encerrarlos en un div y flotar eso.

Aquí hay un bosquejo de cómo debería verse el código HTML anterior:

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

Answer 1

Prueba:

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

Answer 2

Parece que no puedo entender lo que estás tratando de lograr. ¿Podría crear un boceto básico en MS Paint o algo así para que podamos ayudarlo?

EDITAR : Tal vez no entiendo algo aquí, pero así es exactamente como se ve en mi ventana de Chrome (bueno, aparte de los rellenos).