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

I have the following HTML:

<div> <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:

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

6 Answers

If you can modify the HTML:

<div> <span>Cumulative performance</span> <span>20/02/2011</span> </div> .title .date { float:right } .title .name { float:left } 

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:

Check fiddle how different float usages compares to flexbox ("may include some competing answers"): . If you still need to stick with float I recommended third version of course.

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.

The solution using flexbox without justify-content: space-between.

<div> <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:

Here you can see the difference between two flexbox approaches: flexbox with justify-content: space-between and flexbox with flex:1 on the first <span>.

You can do this without modifying the html.

<div> <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 } 

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