Not 100% sure but I think you can not do it that way because floats work differently: The elements float in the order they are put into markup. That means: div 4 can not float left BEFORE div 3 (and so on), so it "waits until div 3 is finished" and that’s why you get that gap. Am I right?
You can rebuild that structure by building columns with divs (fixed width, float) and then placing divs (fixed or variable height) as the boxes inside that columns. You can also place smaller columns inside one larger column to split the content.
And looking at http://suprb.com/#gridalicious on picture 1, box #14 would be a problem I think. The rest of the structure (also on picture 2 and 3) could be rebuild with the columns I suggested.