DIV Vertically floating DIV arrange from up to down by rows

Question

I am trying to locate DIVs vertically from up to down inside container. Container should be limited vertically by 500px. All DIVs that couldn\'t fit in this limit should be floa

Answer 1

You can do this using CSS columns, like in this jsfiddle demo, using following CSS

     #container{
        position: relative;
        background-color: red;
        max-width: 500px;
        min-height: 500px;
        padding: 20px;

        -moz-box-sizing: border-box;
        box-sizing: border-box;

        -moz-column-width: 150px;
        -webkit-column-width: 150px;
        -o-column-width: 150px;
        column-width: 150px;
     }
     #area{
        background-color: yellow;
        display: inline-block;
        font: italic 45px/215px georgia;
        height: 215px;
        margin-bottom: 21px;
        text-align: center;
        width: 215px;
     }

Sizes in the demo have been scaled down to accommodate for small rendering frame size.

This certainly, not very surprisingly, will not work in IE version older than version 10. You can probably use techniques from following ALA page to get it working in IE.