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/
To use a floating image in HTML, use the CSS property float. It allows you to float an image left or right.
The elements after the floating element will flow around it. The elements before the floating element will not be affected. If the image floated to the right, the texts flow around it, to the left and if the image floated to the left, the text flows around it, to the right.
The Order of CSS Classes in HTML Doesn't Matter.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With