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

Question

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

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:

   

   

   

   



   

   

   

   
who do we appreciate

And the CSS:

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