Float right without changing order

While working with float you might have noticed a specific case. When two or more elements are floated to the right side of a container, the order of display changes to the order in which it was written in HTML. To understand what am talking about just see this example.

The HTML,

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>


Normally left floated,

ul, li{
    border:1px solid #000;
}
ul{
    overflow:hidden;
    width:300px;
    padding:0;
    margin:0;
}
li{
    text-align:center;
    float:left;
    margin:20px 5px;
    padding:5px;
    width:25px;
    list-style:none;
}

Left floated elements

Normally right floated,

ul, li{
    border:1px solid #000;
}
ul{
    overflow:hidden;
    width:300px;
    padding:0;
}
li{
    text-align:center;
    float:right;
    margin:20px 5px;
    padding:5px;
    width:25px;
    list-style:none;
}

Right floated elements, with order changed

So as you can see, while we float elements to left the order is { 1, 2, 3 }. But when you float the same thing to the right instead of going to the right with the same order it changes to { 3, 2, 1 }. Interesting right, so is it a bug? Not at all, to understand what is happening here we need to dig into what exactly is meant by floating.

Float

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float is that content may flow along its side. Content flows down the right side of a left-floated box and down the left side of a right-floated box. A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present. Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Any content in the current line before a floated box is re-flowed in the first available line on the other side of the float. In other words, if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice verse for rtl and right floats.
- From w3c css float spec

So now we can say that it's applying what it was asked to. CSS works in a hierarchical fashion. Now what happens is that all the <li> elements needs to be floated right, so it takes the first <li> and place it to the right. Now it takes the second <li> element which also needs to be floated right. So it pushes the second <li> element to right but since the first <li> element is already floated to right it can only go as far as its left. So the second <li> is placed directly to the left of the first <li> element. Similarly with the third <li> element and so on. So you can see elements placed left of each element.

Every thing well told, but this doesn't meet our requirement. We need to maintain the same order when we float elements right. There are few ways in which we can achieve this.

Solution 1:

The HTML,

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

The CSS,

div{
    width:300px;
    border:1px solid #000;
    overflow:hidden;
}
ul{
    padding:0;
    margin:0;
    float:right;
}
li{
    border:1px solid #000;
    text-align:center;
    float:left;
    margin:20px 5px;
    padding:5px;
    width:25px;
    list-style:none;
}

In this solution we need to add any container like <div> to the <ul> element, then float <ul> to right and the float the <li> to left. This will give you the desired result.

Right floated elements in the same order

Solution 2:

The HTML,

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

The CSS,

ul, li{
    border:1px solid #000;
}
ul{
    padding:20;
    margin:0;
    text-align:right;
    width:300px;
}
li{
    text-align:center;
    display:inline;
    margin-left:10px;
    padding:10px;
    width:25px;
    list-style:none;
}

The second solution I feel is pretty much efficient as you need not have any extra elements added. Just " text-align:right " the <ul> element and <li> elements are made inline.