HTML & CSS: Vertical Flow Layout (columnar style), how to implement?

Question

The standard CSS/html positioning of \"flowing\" Elements is horizontal (row based) => float:left;. What do I need to do, to position them like in the example b

Answer 1

Nowadays, the problem described can be solved in a more flexible manner using Flexbox layout. Requires the latest and greatest browser (IE 11+).

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#column

http://philipwalton.github.io/solved-by-flexbox/

Answer 2

There is CSS3 Columns (for the effect you talk about, the Height Balancing section is a good thing to read) which is supported in newer browsers and would look something like

#box {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

And would support IE 10, FF, and Chrome.

Or, you can use a tool like Masonry.js to get column like effects on a page (though this requires JS to work) and support more browsers.

Answer 3

Add a class to each of the divs and style it with something like:

.myDiv
{
  width: 33%;
  float: left;
}