title: How to align this span to the right of the div?
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;div class="title"&gt;
      &lt;span&gt;Cumulative performance&lt;/span&gt;
      &lt;span&gt;20/02/2011&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with this CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>If you check this jsFiddle:
  <a href="http://jsfiddle.net/8JwhZ/" rel="noreferrer">http://jsfiddle.net/8JwhZ/</a></p>
  
  <p>you can see that the Name &amp; Date are stuck together. Is there a way that I can get the date to align to the right? I've tried <code>float: right;</code> on the second <code>&lt;span&gt;</code> but it screws up the style, and pushes the date outside of the enclosing div</p>