I know its a bit tought but look at how i handle this...and yes it CAN be done.
Well if i understand you correctly, then do what i do, FIRST create a main wrapper that wraps it all, that wraps all your content.
Then, instead of floating the separate items, wrap each if your boxes above in their own column wrappers if you will, and then float those. so for example
(pseudo code coming)
<div id="MAINwrapper>//THIS wraps all your content
<div id="mainLEFTwrapper">//float this left
<div one></div>
<div two></div>
</div>
and THIS wraps your divs that float to the right
<div id="mainMID/RIGHT wrapper>//float this left or right
<div 3></div>
<div 4></div>
</div>
</div><!-- main wrap ender -->
then the css is simple. FLOAT left for the first set(markef above as LEFT wrapper), and float right for the second set.(marked as RIGHT wrapper)
Now, since your inner column content/elements are now wrapped within their respective left/right column wrappers, they fall under eachother and you can seperate their height either with margins or simple <br/>
tags.
Then to finish off, make sure you give the MAIN wrapper, a min-width that totals your two inner column wrappers widths so that they dont "float" under eachother when the screen / document window is less than the main wrappers width(hence the floats) lol.
and thats it. i try to treat situations like this, like oldschool tables lol.
if you think about what i explained above like rigid tables, then you'll understand it better.
good luck.
if you need further help, holler, but this im 100% sure WILL work.