How to align this span to the right of the div? - html

Question

I have the following HTML:
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
with this CSS:
.title
{
display: block;
border-top: 4px solid #a7a59b;
background-color: #f6e9d9;
height: 22px;
line-height: 22px;
padding: 4px 6px;
font-size: 14px;
color: #000;
margin-bottom: 13px;
clear:both;
}
If you check this jsFiddle:
http://jsfiddle.net/8JwhZ/
you can see that the Name & Date are stuck together. Is there a way that I can get the date to align to the right? I've tried float: right; on the second <span> but it screws up the style, and pushes the date outside of the enclosing div

Answer 1

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 }

Answer 2

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.

Answer 3

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.

Answer 4

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>.

Answer 5

You can do this without modifying the html.
http://jsfiddle.net/8JwhZ/1085/
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }

Answer 6

ul { /** works with ol too **/
list-style: none; /** removes bullet points/numbering **/
padding-left: 0px; /** removes actual indentation **/
}