Vertically stack divs in different columns css only

Question

I have divs with same width but different heights, they should be displayed in columns, floating up to the next div above them.

Fiddle: http://jsfiddle.net/kaljak/DAYSk/

Is there any way to handle that without placing them via Javascript?

One idea of mine would be to have divs for the columns and place the divs into them, but is there another possibility without adding more markup?

Thanks in advance!

Answer 1

Another possible solution is to use CSS columns. Apply the columns property to the container

body {
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
    column-width: 100px;
}

Then use display: inline-block; on the divs.

Example: http://jsfiddle.net/tdwZe/

See also https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

Note: CSS columns are not supported in IE older than IE10 (http://caniuse.com/#feat=multicolumn).

Answer 2

You can, but you would need to place those boxes in parent boxes

demo http://jsbin.com/ozazat/3/edit

For example 3 columns, each holding as many boxes as you wish:

div div {
  background-color:red;
  margin:10px;
}
.col1, .col2, .col3 {
  width:100px;
  float:left;
  border:solid;
}

HTML

<div class="col1">
    <div>text</div>
    <div>text</div>
    <div>text</div>
  </div>  
  <div class="col2">

        <div>text<br>text</div>
    <div>text</div>

  </div>  
  <div class="col3">
        <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>

  </div>

Answer 3

Yes. You can use absolute positions. Assuming you know the heights of your divs. This solution does not work well for dynamic content.

You will need to assign a class to each div, then provide the relevant CSS to position it correctly.

div1 {
  height: 100;
  position: absolute;
  left: 0; 
  top: 0;
}

div2 {
  height: 100;
  position: absolute;
  left: 0; 
  top: 100px; /* The height of the div above it */
}

Etc...

If you do have dynamic content, it may be better to use JavaScript, in particular the jQuery Masonry Plugin.

Another way to do this is, like you mentioned, stack your divs in columns.

See this question for more details.