CSS floats below and to the left

Question

I have many divs with variable height. I need these divs to sort under each other, but when they reach the end of the window -> create a new "column".

Now the divs are crowded, but I need to create a new “column”.

BTW:

I have a solution using:

-webkit-column-gap: 16px; -webkit-column-width: 230px; 

But I need to support other browsers.

Thank you for your help!

Answer 1

Do it with CSS only ,

the parameter will use column-count and max-height in the container.

see DEMO

but I'm not sure about sopport support.

This is similar to what you want, at least to some extent, but you will probably be better off with something in javascript.

EDIT: here I insert 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; } 

Answer 2

Another way to solve this problem is to use jQuery to get the available window height and create each column based on this information. In another way, but still using jQuery, you use the Mansory jQuery ( http://masonry.desandro.com/ ) plugin or isotope ( http://isotope.metafizzy.co/ ).

Answer 3

Try something like this: Where maxHeight exactly matches the height of the window.

 <style type="text/css"> .maxHeight { display:inline-table; height:600px; width:50px; float:left; background-color:#09F; margin:3px; } .box { display:inline-block; height:50px; width:50px; background-color:#33F; margin:2px; } </style> <span class="maxHeight"> <span class="box"></span> <span class="box"></span> <span class="box"></span> <span class="box"></span> </span> <span class="maxHeight"> <span class="box"></span> <span class="box"></span> <span class="box"></span> <span class="box"></span> </span> <span class="maxHeight"> <span class="box"></span> <span class="box"></span> <span class="box"></span> <span class="box"></span> </span> 

Javascript for this loop will require a little attention, but it is possible.