Prevent Right Floated Elements From Swapping

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

Solution 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!

Solution 2:

Like left-floated elements, which float as far left as possible until they hit another left-floated element, right-floated elements will float as far right as possible until they hit another right-floated element. That's actually good, consistent behavior, confusing as it may be at first glance.

If you're feeling really crazy, you might try something like swapping the elements with Javascript after the fact…but that'll wreak havoc for your non-JS users and ultimately confuse the issue even more with developers who know how right-floats are supposed to behave. Swapping the HTML order really is the way to go here, sorry :/