title: Floats in CSS - Gap/space left on top when floated to the right?
body: <p>This is a little difficult to describe, but basically there is undesired space left by a floated div on my page. Here are pictures describing the problem. The black boxes are divs.</p>
  
  <p>Before floating:</p>
  
  <p><img src="https://i46.photobucket.com/albums/f105/Elwood54/before-float.png" alt="alt text"></p>
  
  <p>After floating:</p>
  
  <p><img src="https://i46.photobucket.com/albums/f105/Elwood54/after-float.png" alt="alt text"></p>
  
  <p>Desired effect:</p>
  
  <p><img src="https://i46.photobucket.com/albums/f105/Elwood54/should-look.png" alt="alt text"></p>
  
  <p>And I'm not sure if it makes a difference, but I also have an empty div with "clear: both" placed immediately after the floated div.</p>
  
  <p>How can I achieve this?</p>