Different div 2 column layout

Question

This is different than the simple 2 column layout.

I need to have this 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>

The div class menu has a static width, I need the divs inside it to go in a right column, and the normal divs to stay as they are.

Here's the CSS I got so far, but I cant seem to figure it out yet:

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

The divs inside have random order, so I can't enclose them in a div and float that.

Here's a rough sketch of what the HTML code above should look like:

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

Answer 1

Try:

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

Answer 2

I can't seem to figure out what you are trying to achieve. Could you please create some basic sketch in MS Paint or something so we could help you?

EDIT: Maybe I don't understand something here, but this is exactly how it looks in my Chrome window (well, apart from the paddings).