HTML float right element order

If I have three elements flaoted to right, why order is following (see jsfiddle) element 1 is first element on right side, when element 3 is actually last element.

Order is now

[3] [2] [1]

But elements are in this order in html

[1] [2] [3]

Why?

http://jsfiddle.net/A9Ap7/

Solution 1:

That 'inverted order' is the intended result.

You can dig around in the CSS Specification if you'd like, but your example renders as it ought to.

If you'd like them to display in the same order as the markup, float the .container right, its children left.

Updated jsfiddle

Solution 2:

The first element moves to the right, stops when it hits the edge of the container and allows the next element to move up to its left.

The second element then does the same, except it stops when it hits the left edge of the first element.

… and so on.

Solution 3:

float property starts it's analysis from the most right to most left.
ex:

<div class="block block-1"></div>
<div class="block block-2"></div>
<div class="block block-3"></div>

with this rule:

.block {
    float: left;
}

block-3 gets aligned to the left, we have: block-3, block-1, block-2
block-2 gets aligned to the left, we have: block-2, block-3, block-1
block-1 gets aligned to the left, we have: block-1, block-2, block-3

with this rule:

.block {
    float: right;
}

block-3 gets aligned to the right, we have: block-1, block-2, block-3
block-2 gets aligned to the right, we have: block-1, block-3, block-2
block-1 gets aligned to the right, we have: block-3, block-2, block-1

If you want them float:right in the right order: block-1, block-2, block-3
then you should swap them in markup

<div class="block block-3"></div>
<div class="block block-2"></div>
<div class="block block-1"></div>

UPDATE: Or wrap them all in a parent, and only float parent

Solution 4:

Using float or any other css property has no effect on html source code.

Any element that follows the floated element will flow around the floated element on the other side.

If you float an image to the left, any text or other elements following it will flow around it to the right. And if you float an image to the right, any text or other elements following it will flow around it to the left.

Solution 5:

This is because in your html, you have specified that [element 1] be displayed first aligned to the right. Hence this is exactly what the browser renders. When, in your html, you go on to display [element 2], floated to right, the browser does this BUT AFTER giving [element 1] priority of being displayed to the right as [element 1] came first in your HTML.

Hope this makes sense.