異なるdiv 2列レイアウト

Question

これは、単純な2列のレイアウトとは異なります。

この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>

divクラスのメニューには静的な幅があり、その中のdivを右の列に移動し、通常のdivをそのままにしておく必要があります。

これまでに取得したCSSを次に示しますが、まだ理解できないようです。

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

内部のdivはランダムな順序になっているため、divで囲んで浮動させることはできません。

上記のHTMLコードがどのように見えるかについての大まかなスケッチを次に示します。

代替テキストhttp://img102.imageshack.us/img102/4494/flytc3 .jpg

Answer 1

試してください：

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

Answer 2

私はあなたが何を達成しようとしているのか理解できないようです。 MSペイントなどで基本的なスケッチを作成していただけますか？

編集：私はここで何かを理解していないかもしれませんが、これは私のChromeウィンドウでの見た目とまったく同じです（パディングは別として）。