Как у элементов с float:left сделать так, чтобы когда один элемент выше другого, третий элемент прижимался к другому, а не был на новой строке?

Question

[sorry_i_noob]

Здравствуйте. Есть вот такой набросок: https://jsfiddle.net/jpfrmszg/ .
Фиолетовый элемент настолько высокий, что слева от него могут поместиться синий и зеленый. Однако они этого не делают. А просто переносятся на новую строку. Как мне сделать, чтобы они это делали?

Answer 1

[Flying]

Через float вы этого не сделаете т.к. float - это расположение элементов вне основного контекста документа с выравниванием по соответствующему краю. То как выстроились элементы в вашем примере - частный случай, определяющийся их конкретными стилями.

То чего вы пытаетесь достичь называется masonry layout и в общем случае на CSS не реализуется, зато есть целый ряд JavaScript плагинов для этого, ссылки на некоторые есть в статье. Наиболее известный - Masonry.

Answer 2

[Марат Гарифуллин]

.item_color_2 {
  float: right;
  background-color: purple;
  height: 80px;
}