6

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 ?

anonymous
  • 61
  • 1
  • 2
  • Check this out: http://masonry.desandro.com/?resources/jquery-masonry It's not exactly what you're asking, but you might get some good ideas from it. – Gustavo Giráldez Jun 16 '11 at 21:04

2 Answers2

2

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:

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

Demos:

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • on second thought, doesn't really work for me. I have some dynamic elements in some of the blocks, some which starts hidden, and masonry doesn't seem to cope so well with that. – anonymous Jun 18 '11 at 10:40
0

Set up your CSS into vertical columns versus horizontals. Smashing Magazine has a great piece about floats and their quirks, go take a look: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Sanden
  • 96
  • 7