title: floating divs without overlap
body: <p>I have 3 <code>&lt;div&gt;</code>s, and I need to put the second one on the right, so I used <code>#two {float:right;}</code>. </p>
  
  <p>This is my <a href="http://i37.servimg.com/u/f37/11/89/27/52/11111110.jpg" rel="nofollow">current result</a>: <code>#one</code> on the left, <code>#two</code> on the right; both as intended. The problem is that <code>#three</code> floats up.</p>
  
  <p>I tried to put <code>#one</code> and <code>#two</code> inside a separate div than <code>#three</code>, but the problem is still there. </p>
  
  <p>This is my <a href="http://i37.servimg.com/u/f37/11/89/27/52/33333310.jpg" rel="nofollow">expected result</a>: the top of <code>#three</code> should be at the same vertical position as the bottom of <code>#two</code>.</p>