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 below (columnar style). Are there any CSS tags to set this somewhere? (Ideally I do not want to setup a grid, this should happen the same way automatically lilke it does in the float:left style...)

+---------------------------+
|  DivBox1                  |
|  DivBox2                  |
|  DivBox3                  |
+---------------------------+

After adding: 2 more boxes:

+----------------------------+
|  DivBox1  DivBox4          |
|  DivBox2  DivBox5          |
|  DivBox3                   |
+----------------------------+

Finally, after adding 2 more boxes it would look like this:

+-----------------------------+
|  DivBox1  DivBox4  DivBox7  |
|  DivBox2  DivBox5           |
|  DivBox3  DivBox6           |
+-----------------------------+

Answer 1

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.