CSS Floating Divs with different height are aligned with space between them

i am using left floating DIVs to simulate a two column layout (each div contains textfield to edit different data, like name, hobbies,...). So it should look like this

1 2
3 4
5 6

Now my div-boxes aren't always the same, since some DIVs have more elements than the other ones. Now my layout looks likes this

   1 2
     2 
   3 4
   5 6

You can also see the effect on this example if you scale your so that only four or three colums are shown. E.g. if 4 columns are shown in a row there is much space between Float 1 and Float 6. This doesn't look good on my UI. What I want is to have Float 6 following Float 1 with no space in between (except the margin I define)

Edit: My DIVs basically just contain a float:left and a width:40%, so that two fit on a screen

Here's a screenshot showing more