Как сверстать 2 столбца блоков, избегая пустых пространств между ними?

Question

[Алексей Смирнов]

Есть вот такой набор блоков:

jsfiddle.net/5o644soy/7

Как можно увидеть, блоки идут друг за другом. Между красным и синим блоками, а также между синим и чёрным - возникают пустые пространства. В следствии разного объема текста, наполняющего эти блоки.
Планируется, что объём текста, заполняющий каждый блок, будет постоянно меняться.

Как сделать так, чтобы все эти блоки, располагались бы друг за другом, без возникновения пустых пространств (между блоками по вертикали)?

Исключение составляют отступы в 50px, умышленно созданные при помощи:
margin-top: 50px;

Answer 1

[Евгений Петров]

Masonry и подобные ему плагины (искать по этому названию).

Answer 2

[Сергей delphinpro]

флоатами задачу не решить.
Можете воспользоваться multiple columns из css3
jsfiddle.net/5o644soy/9
поддержка caniuse.com/#search=columns

Answer 3

[Алексей Смирнов]

Статью нашёл на эту тему:
designshack.net/articles/css/masonry
Может кому-либо в будущем пригодиться.