Masonry Layout in CSS3?

Answer 1

If there are only two columns, why not just use floats, alternating left and right floating/clearing for odd and even boxes?

.container {
    background-color: yellow;
    overflow: hidden;
    width: 100%;
}
.box {
    height: 100px;
    width: 50%;
}
.box:nth-child(odd) {
    float:left;
    clear: left;
}
.box:nth-child(even) {
    float:right;
    clear: right;
}
.box1 {
    background-color: lime;
}
.box2 {
    background-color: blue;
    height: 120px;
}
.box3 {
    background-color: red;
    height: 140px;
}
.box4 {
    background-color: green;
}

    
child 1
    
child 2
    
child 3
    
child 4