CODEWITHSUNDEEP
htmlcsscss-float
JacobTheDev
JacobTheDev

Reputation: 18520

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:

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?

Upvotes: 3

Views: 1458

Answers (2)

Nathanael
Nathanael

Reputation: 7153

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!

Upvotes: 6

Matchu
Matchu

Reputation: 85794

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 :/

Upvotes: 1

Related Questions