Почему «выпадают» div?

Question

[TanyaVojt]

Есть блок с бэкграундом на всю ширину экрана, внути контент с фиксированной шириной. Соответственно пытаюсь верстать, т.е. создаю div (назовем грубо "main") с шириной 100% и нужным фоном, внутрь помещаю div с контенотом, в контент помещаю img и div с тестом отдельно. В результате, родительский див main оказывается пустым (высота 0), из него, как бы, все выпадает. Может потому что я неверно позиционирую элементы внутри контентного div? Изображение и блок с текстом я размещаю с помощью float. Хотя пыталась и с помощью position справиться, все равно не получается.
Так же, может кто-то подскажет где почитать как правильно верстать современные длинные сайты? У меня не получается размещать один под другим разные section (div) без position и свойства top. А я себе представляла, что т.к. это блочные элементы с шириной 100%, то они должны автоматом выстраиваться вниз.

Answer 1

[Андрей Ежгуров]

Дело именно во float. После блоков с float'ами должен идти блок со style="clear: both;" - именно это заставит родительский блок учесть высоты дочерних float-блоков. В качестве такого блока может выступать и псевдоэлемент :after (чтобы html не засорять заглушками).

Подробности можешь прочитать, например, на htmlbook.ru

Это без float элемент будет блочным и шириной 100%. А когда ты ставишь float, то ширина блока - если не указано значение ширины в абсолютных величинах (px, em и т.д.) - уменьшается до ширины контента.

Старайся верстать без float. В большинстве случаев можно обойтись вариантами display: inline-block, или display: table-cell. А недавно появился великолепный вариант display: flex.

Comments

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

Ну и ещё контейнеру можно поставить overflow, отличный от visible — это также заставит учесть плавающих детей.

[TanyaVojt]

Делала clear, не полечило. С шириной проблем нет, а вот с высотой... За совет с display большое спасибо, буду пробовать. Обходила его, т.к. мне нужно, чтоб контент прилипал по краям блока, думала, что это лучше делать именно float.

Answer 2

[Евгений Низамиев]

оно ? xiper.net/collect/html-and-css-tricks/css-tricks/c...

Comments

[TanyaVojt]

Попробую - напишу. Но очень похоже. Спасибо!

Answer 3

[TanyaVojt]

Всем спасибо! Сделала через display, по-другому вообще никак не получалось.