Float containers with variable height

Question

So, I have x the number of "blocks" that I want to float to the left .. Like this:

ABCD

EFGH

BUT if B is twice as long as the rest, for example, there will be empty space between A and E, C and G, D and H.

How can I avoid this and just all containers will float to the left and then fit nicely without any extra space in between?

+6

anonymous June 16 11 at 20:59

2 answers

thirtydot · Answer 1 · 2011-06-16T21:13:28+0000

CSS cannot handle this in general.

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

Otherwise:

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

If you want to use JavaScript, you must use jQuery Freemasonry .

Demonstrations:

Sanden · Answer 2 · 2011-06-16T21:17:30+0000

Adjust your CSS to vertical columns and horizontals. Smashing Magazine has a great article on floats and their quirks, take a look: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/