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;
}

Answer 2

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

Answer 3

Try something like this: Where maxHeight is exactly equal to 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>

The Javascript to loop through this will require a bit of attention but it is plenty possible.