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

Question

Hi,

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

Answer 1

The jQuery Masonry plugin will do exactly what you want.

If you wanted to stick with pure CSS, you could do something like the following, but I don't think it's what you're going for:

<div class="col">
   <div class="one"></div>
   <div class="three"></div>
   <div class="five"></div>
   <div class="seven"></div>
</div>
<div class="col">
   <div class="two"></div>
   <div class="four"></div>
   <div class="six"></div>
   <div class="eight">who do we appreciate</div>
</div>

And the CSS:

.col {
    float: left;
    width: 200px;
}

Answer 2

Why don't you just do a 4-column layout?