How to float two elements to the right maintaining the same order visually and semantically?

Question

How to float two elements within a wrapper element to the right keeping the same order of the elements visually and semantically?

<style>
.container { widht: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

When rendered, this will make the inner elements appear in the order of "Says Simon", http://jsbin.com/eravan/1/edit.

Solution 1

The common fixes are:

Adding auxiliary element

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: left; margin: 0; }
.container .aux { float: right; }
</style>
<div class="container">
    <div class="aux">
        <p class="a">Simon</p>
        <p class="b">Says</p>
    </div>
</div>

http://jsbin.com/eravan/6/edit

The problem with this approach is the redundant auxiliary element itself.

Messing with the semantics

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="b">Says</p>
    <p class="a">Simon</p>
</div>

http://jsbin.com/eravan/9/edit

This is the worst solution and, unfortunately, the most common as well (Ali Bassam comment directly below proves it).

Neither of these is the correct answer.

Solution 2

You can also use display: inline-block; instead of float while setting text-align: right; on the parent element.

http://jsbin.com/eravan/10/edit

Solution 3

There are lots of possibilities here with flexbox (including visually reordering elements), so the approach you would take depends on the surrounding content. However IE doesn't support it until version 10.

http://caniuse.com/#feat=flexbox

.container {
    width: 200px;
    height: 50px;
    background: #333;
    display: flex;
}

.container.a {
    justify-content: flex-end;
}

.container p {
    width: 50px;
    height: 50px;
    background: #f00;
    margin: 0;
}

.container.b .a {
    margin-left: auto;
}

<div class="container a">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

<hr />

<div class="container b">
    <p class="c">Let's Play</p>
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

http://jsfiddle.net/6NWmt/ (prefixes not included)

Comments

[Gajus]

What is the cross-browser support with gte IE6?

[Ali Bassam]

I actually have to oppose your expression : worst solution. This solution does not contradict at all with the principals of floating, most people are used on floating left which is easier and the HTML will be in order, but why does it become a "worst solution" when it comes to float:right ? "With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it." And I'm sure our dear questioner's plan is far more than "Says Simon", it's not about fixing it to "Says Simon" because he knows he can put it in a div. It's about the float:right order of divs.

[Gajus]

I know what are conditions comments. What is the purpose of linking me to it?

[Gajus]

CSS should be used for styling elements and not to change the meaning of the content. The same way auxiliary HTML elements should not be added for styling purpose.

[cimmanon]

Using display: inline; display: inline-block would be the way to go for dealing with IE<8. You'll also need to give it a hasLayout property: haslayout.net/haslayout

[miru87]

If you ask me for display inline-block support for ie6+, you have to add *display: inline; zoom: 1;

[Gajus]

So far this seems the best solution. I can't think off any negative implications.

[Gajus]

Theoretically an option, though wouldn't upvote it. There are too many negative implications. The most serious is that generally such code is hardly reusable, even within the same layout. Furthermore, think about people who zoom in content and responsive layout. Ignoring the reusability implication, this could be an answer for a prototype or an application (such as Facebook page application) layout where container dimensions are somewhat known not to change.

[Gajus]

Was just adding this to my answer. : ) Good job. Regarding IE10, at the moment it supports the old specs (from 2009). There is a polyfill that adds support for all the browsers, github.com/doctyper/flexie. Unfortunately, it does too follow the outdated specs.

[cimmanon]

According to the IE docs, they're following the spec from early 2012. It's virtually identical to the current draft (late 2012) with a few properties missing (flex-shrink, flex-grow, flex-basis), a few properties with different names (flex-pack vs justify-content), and a few values with different names (end vs flex-end). gist.github.com/4461470

[Mat Richardson]

Good points made. I hadn't taken into account fluid layouts etc - just thought it another possible angle to attack the problem from.

[VDarricau]

That's a good solution. But don't forget display: inline-block causes white space issues https://css-tricks.com/fighting-the-space-between-inline-blo‌​ck-elements/