Div наезжает другой?

Question

[Mesuti]

Привет!
Не могу разобраться.
Уже все перепробовал, всякие position и margin и width 100%
Песочница Jsfiddle

В общем есть блок с картинками, каждая float:left
Есть блок с текстами.
Как сделать div с текстом ровно под картинками?
Как сделать картинки по центру?

p.s. Работает только если верхнему блоку задать float right. Насколько это будет правильно?

Answer 1

[Pavel K]

Всё внимание на 9 строку и стили.
https://jsfiddle.net/4fpbc4at/2/
Гугл на тему clear fix.
P.S. Данная методика уже сильно устарела, есть ведь уже поддержка Flexbox и Grid у большинства браузеров, пост в тему: https://habrahabr.ru/post/325760/

Comments

[Mesuti]

Спасибо, что подсказали что учить!
clear fix. еще не разобрал

[Владислав]

Александр Сорокин, https://jsfiddle.net/4fpbc4at/4/

Answer 2

[pereyaslavskiy]

.kindergarten-block {display:grid;} Будет достаточно, чтобы решить

Comments

[Mesuti]

Насколько понимаю, grid не везде работает?

[Николай Шабалин]

Александр Сорокин, всё верно https://caniuse.com/#feat=css-grid , особенно гадкий в этом плане IE11.

Answer 3

[Владислав]

https://jsfiddle.net/4fpbc4at/4/