title: Two column div layout, text aligned right
body: <p>I'm looking for the best way to create a block of left-aligned text and a block of right aligned text inside a div.</p>
  
  <p><a href="http://i.stack.imgur.com/hX2SC.png" rel="nofollow">This is an image of what I want it to look like</a></p>
  
  <p>I've thought about creating three <code>div</code>s with one in the middle acting as a buffer, but it doesn't seem to work. I'd need to hard code the length of the middle div, and this doesn't seem like the best approach</p>
  
  <pre><code>&lt;div style="width: 500px;"&gt;
   &lt;div style="float: left;"&gt;left aligned text&lt;/div&gt;
   &lt;div style="float: left; width: 100%" &gt; &lt;/div&gt;
   &lt;div style="float: left;"&gt;right aligned text &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>