Float containers with variable height
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?
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:
- CSS floating divs in variable heights
If you want to use JavaScript, you must use jQuery Freemasonry .
Demonstrations:
- http://masonry.desandro.com/demos/animating-css-transitions.html
- http://masonry.desandro.com/demos/adding-items.html
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/