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.
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? 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.
pull-right class is used to float the element to the right.
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.
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
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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With