How to align this span to the right of the div?
The solution using flexbox without justify-content: space-between
.
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
.title {
display: flex;
}
span:first-of-type {
flex: 1;
}
When we use flex:1
on the first <span>
, it takes up the entire remaining space and moves the second <span>
to the right. The Fiddle with this solution: https://jsfiddle.net/2k1vryn7/
Here https://jsfiddle.net/7wvx2uLp/3/ you can see the difference between two flexbox approaches: flexbox with justify-content: space-between
and flexbox with flex:1
on the first <span>
.
An alternative solution to floats is to use absolute positioning:
.title {
position: relative;
}
.title span:last-child {
position: absolute;
right: 6px; /* must be equal to parent's right padding */
}
See also the fiddle.
Working with floats is bit messy:
This as many other 'trivial' layout tricks can be done with flexbox.
div.container {
display: flex;
justify-content: space-between;
}
In 2017 I think this is preferred solution (over float) if you don't have to support legacy browsers: https://caniuse.com/#feat=flexbox
Check fiddle how different float usages compares to flexbox ("may include some competing answers"): https://jsfiddle.net/b244s19k/25/. If you still need to stick with float I recommended third version of course.
If you can modify the HTML: http://jsfiddle.net/8JwhZ/3/
<div class="title">
<span class="name">Cumulative performance</span>
<span class="date">20/02/2011</span>
</div>
.title .date { float:right }
.title .name { float:left }