css float - CSS two columns with known children width

Question

I creating some code for showing box with diffrent heights (height will be from images inside).

In this example works perfectly: http://jsfiddle.net/GSnfG/

...but when i edit some height (in future - height of image), here: box 3 set to height 100px, the results doesn't work good.

How prepare CSS code for creating something like two columns?

I cannot use tables, also i don't want use jquery or other js It is possible?

Answer 1

No, it's not possible to handle this in the general case without JavaScript or a server-side language.

In some cases, you can add wrapper divs for each separate column, but some combinations of element size will make this look bad, for example: http://jsfiddle.net/suaaK/3/ - in that demo, it would probably be better if Box 6 was under Box 3. The more (and more differently sized) elements you have, the more uneven the columns can become.

See this answer for a comparison of the candidate techniques, showing that they don't work, and also showing the client-side portion of the solution involving server-side code:

• CSS Floating Divs At Variable Heights

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

There's also a raw JavaScript version: Vanilla Masonry

Demos:

• http://desandro.com/demo/masonry/docs/filtering.html
• http://desandro.com/demo/masonry/docs/animating-jquery.html
• http://desandro.com/demo/masonry/docs/appending.html