lost on this css issue

[cybershot]

I am working in bootstrap and I have noticed that this problem occurs no matter what.

I have a header. In that header, I have 4 inline links. Two are text and two are images. If I float the links to the right so that they will be lined up with the right side of the container, they will switch places. So link one and two take the place of link 3 and four. So instead of going 1,2,3,4 it will go 4,3,2,1 by simply putting a float: right on the links. This doesn’t happen when you use float: left. Can anyone tell me what the heck is going on?

[Alen]

Think of the first element in the list that’s being floated as “front of the train” and the floats left and right as “fork in the tracks”. So you always lead with the first DOM element, left or right.

[Alen]

MS Paint to the rescue:

If you’re trying to float to the right and keep the list in order.
http://codepen.io/anon/pen/Ckfyq

[Senff]

What you might be looking for, is to put the four links in a DIV. Then put a float:left; on the links within the DIV (so that they will stay in 1,2,3,4 order) and then a float:right; on the DIV (so that the whole thing will be placed on the right).

[Mavericks]

Very nice @Alen

[ambrosechua]

codepen.io/ambc/pen/soLmx

[Author]

Posts