css - float variable height containers

Question

So i have x amount of "blocks" that I want to float left.. Like this :

A B C D

E F G H

BUT, if B is twice as long as the rest, for example, there would be white space between A & E, C & G, D & H.

How can I avoid that and just have all the containers float to the left and then fit in nicely without excess white space in between ?

Answer 1

CSS cannot handle this in the general case.

If there are a fixed number of columns, you can cheat and do this: http://jsfiddle.net/suaaK/11/

Otherwise:

See this answer for a comparison of the candidate techniques, showing that they don't work:

• CSS Floating Divs At Variable Heights

If you're willing to use JavaScript, you should use jQuery Masonry.

Demos:

• http://masonry.desandro.com/demos/animating-css-transitions.html
• http://masonry.desandro.com/demos/adding-items.html