CSS float under and left

Question

I have many divs with variable height. I need these divs sort under each other but when they will reach end of window –> create new \"column\".

Answer 1

To do it with CSS only,

an option would be using column-count and a max-height on the container.

see DEMO

but I am not sure about browser sopport.

It kinda does what you want, at least to some extend, but you would probably be better of with something in javascript.

EDIT: here I paste the CSS:

.container {
    column-count: 3; 
    -webkit-column-count: 3;
    -moz-column-count: 3; 
    -ms-column-count: 3; 
    -o-column-count: 3;

    vertical-align:text-top;

    max-height:100px;
}