Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML float right element order

Tags:

html

css

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/

like image 401
newbie Avatar asked Nov 27 '11 17:11

newbie


People also ask

Can you float right in HTML?

To use a floating image in HTML, use the CSS property float. It allows you to float an image left or right.

In what direction does float will work IMG float 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.

Does the order of elements matter in HTML?

The Order of CSS Classes in HTML Doesn't Matter.


1 Answers

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

like image 198
bookcasey Avatar answered Oct 07 '22 16:10

bookcasey