Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 701
Gajus Avatar asked Jan 26 '13 14:01

Gajus


People also ask

How do you float an element?

In CSS, the float property specifies how an element should float. The floated element will be removed from the normal flow of the page, but it will remain part of the flow — meaning, the element will be shifted to the left or right until it touches the edge of its container or another floated element.

What are two valid techniques used to clear floats?

What are two valid techniques used to clear floats? Use the "clearfix hack" on the floated element and add a float to the parent element. Use the overflow property on the floated element or the "clearfix hack" on either the floated or parent element.

Which class can be used to float an element to the right of the page?

pull-right class is used to float the element to the right.

How do I align two elements on the same line?

To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.


3 Answers

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

like image 138
miru87 Avatar answered Nov 13 '22 04:11

miru87


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.

like image 44
Gajus Avatar answered Nov 13 '22 04:11

Gajus


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)

like image 28
cimmanon Avatar answered Nov 13 '22 04:11

cimmanon