title: Align text at the end and the beginning of a div
body: <p>Currently I'm having a solution, but I'm almost certain that there's a better solution out there. Basically I'm having a block-element and want to align some of the text at the beginning of my block and some at the end.</p>
  
  <p>Here's a little <a href="http://jsfiddle.net/ScHdJ/" rel="nofollow">jsfiddle</a> example</p>
  
  <p>What I'm doing is using float and 2 more block-elements inside to align it:</p>
  
  <pre><code>&lt;div id="block"&gt;
      &lt;div id="start"&gt;1&lt;/div&gt;
      -
      &lt;div id="end"&gt;12&lt;/div&gt;
  &lt;/div&gt;
  
  #block {
      text-align:center;
      background: #000;
      color: white;
      width:150px;
  }
  #start {
      float:left;
  }
  #end {
      float:right;
  }
  </code></pre>
  
  <p>I have many of those little objects, so my code is bloated with <code>div</code>'s. Is there no more lightweight solution for this out there ?</p>