Как решить проблему с выпаданием блоков?

Question

[bitcovich]

Всем привет!:)
Немогу понять причину такого поведения трёх вложенных блоков. При display: inline-block; блоки не выпадают, но когда я начинаю вкладывать в эти блоки картинки и текст, то они начинают вести себя непредсказуемо. При float:left; всё работает нормально, проблема только в другом - блоки выпадают из потока. Всегда прописывал блокам псевдораспорку, и всё работало хорошо, но в данном случае не работает. Пробывал прописывать .clearfix {clear:both}, но всё оказалось безуспешно. Помогите пожалуйста в решении данной проблемы.
Заранее спасибо!:)

Исходный код:
https://jsfiddle.net/vymv3rL6/1/

Answer 1

[Никита]

Из за флоат, не высчитывает размер блока и он не тянется.

На content повесьте класс:

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Comments

[bitcovich]

Спасибо большое!:)

Answer 2

[Максим]

Я так понял проблема в footer : https://jsfiddle.net/vymv3rL6/12/

Answer 3

[Варлам Ерофеич]

На скору руку подогнал размерчики, применяя "vw, vmin" и процент. Фон делал, чтобы видеть размеры блоков.
Главное - делать картинки "резиновыми", тогда они не будут выпрыгивать из "дива". Не судите строго, торопился.
- Результат