Question

It seems like every time I float two elements to the right, they get swapped. This doesn’t occur for left floated elements, and it seems to be in every browser.

Here’s an example:

CODE:

<style type="text/css">
    .right {
        float: right;
    }
</style>
<div class="right">DIV ONE</div>
<div class="right">DIV TWO</div>

RENDERED:

DIV TWO DIV ONE

It’s not really a major issue but it does cause confusion when swapping code with coworkers. Is there any way to prevent this from happening?

Answer 1

Another possible option is to, instead of FLOATING right, just text-align: right;. Then, mark each DIV as display: inline-block; instead of block. Depending on your exact situation, this might cause problems, but in a lot of other cases, it’ll work just fine.

If problems arise, you can stick the two DIVs in a wrapper, and float that to the right, and then use my solution. However, that’s a little less semantic, but I suppose it ultimately doesn’t matter that much. It’s up to you!