float_blocks_fill

by Bad_ptr

HTML

<div class="container">
    <div id="b1" class="block">
    </div>
    <div id="b2" class="block">
    </div>
    <div id="b3" class="block">
    </div>
    <div id="b4" class="block">
    </div>
    <div id="b5" class="block">
    </div>
    <div id="b6" class="block">
    </div>
    <div id="b7" class="block">
    </div>
</div>

CSS

div.container {
    border: 5px solid black;
    
    column-count 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    
    column-width: 33%;
    -moz-column-width: 33%;
    -webkit-column-width: 33%;
}
div.block {
    max-width: 200px;
    max-height: 500px;
    margin: 15px;
    overflow-y: auto;
    float: left;
    clear: none;
    border: 1px solid red;
}
#b1 {
    width: 150px;
    height: 30px;
}
#b2 {
    width: 150px;
    height: 130px;
}
#b3 {
    width: 150px;
    height: 130px;
}
#b4 {
    width: 150px;
    height: 30px;
}
#b5 {
    width: 150px;
    height: 30px;
}
#b6 {
    width: 110px;
    height: 70px;
}
#b7 {
    width: 220px;
    height: 60px;
}