title: Floating divs and unwanted space
body: <p>I have several floating divs, which are graphically arranged thusly (their hierarchy in the code is indicated by numbers):</p>
  
  <pre>(1)top left div - (2)div - (3)top right div
  (6)bottom left div - (4)div - (5)bottom right div</pre>
  
  <p>All divs are currently floating left contained in a wrapper. The problem I'm having is that the bottom left box is lower than where it ought to be. I know why; the last box is floating left of the bottom right and so it's getting shoved down out of the layout. My question is how do I get that div back up to where it belongs.</p>
  
  <p>Basically the divs are outputting as such:</p>
  
  <pre>
  •••
   ••
  •</pre>
  
  <p>You should also know that the top left div is taller than the other two top divs, and the bottom left div is shorter than the other two bottom row divs.</p>