CSS multiple different height float left elements arranged in 2 columns [duplicate]

Question

this is a problem with white spaces: I have multiple, float:left elements, that I need arranged in 2 columns, and, they all have different heights.

To make it easier, I need the element 3 in the picture, to be right after the element 1. Keeping the padding of course.

I'm 100% using Plain, let's say Vainilla CSS, and AngularJS. I would like to avoid to use any JS modules as the elements are being loaded and re-loaded almost permantly. Most important: 100% need to avoid Jquery.

important update:

Cannot use float:left, float:right approch (if child even or odd): Float multiple fixed-width / varible-height boxes into 2 columns

important update:

In some cases I do require to apply 2 elements, only, one at the bottom of the other. So I'm looking to apply a property to the element 1.

Answer 1

Use css flex layout with a column direction. You can read a very good explanation from CSSTricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Or use a masonry approach with column css property:

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>