DaveDev DaveDev - 5 months ago 8
CSS Question

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

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

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