css - HTML float right element order

Question

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/

Answer 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