CSS. Как заполнить пустоты блоками?

Question

[Dima4jin]

jsfiddle.net/JPr8w/2

Как заполнить всё имеющееся пространство под блоком foo при условии что его высота может быть разной?

Answer 1

[Николай Васильчук]

jsfiddle.net/JPr8w/3

Answer 2

[Анна Бакурова]

если уж принципиально float то нужно обворачивать каждую строку в .clfx, а так то inline-block оптимальный вариант но для старых ie это не выход

Answer 3

[Петруша Укропов]

masonry.desandro.com

Answer 4

[Сергей Протько]

flexbox, если только css, а так только при помощи js библиотек типа masonry

Answer 5

[Сергей Ларионов]

Заменить все float: left; на display: inline-block;
Это даст другой алгоритм заполнения страницы блоками. Конкретно в этом случае первый синий блок окажется прижат к левому краю, по высоте сразу после .foo

* Не забыть вставить что-то типа margin-left: -0.25em; для каждого из блоков, чтобы нивелировать ширину пробела, которая появляется между элементами с display: inline-block; Впрочем, есть и другие техники на этот счёт.

Answer 6

[Павел Гоголинский]

Используй display: inline-block всместо float: left