Рубрики
Верстальщику

Выравнивание высоты контейнеров при верстке DIVами

Думаю, что все, кто осознал все преимущества верстки слоями перед табличной разметкой, ни смог не обратить внимания на один, как по мне, существенный недостаток блочной модели. Что это? Это высота контейнеров.Работая над очередным проектом, я перепробовал несколько вариантов решения данной проблемы, с которыми и хочу познакомить вас в рамках этой статьи.

К сожалению, если мы будем использовать трех- или двухколоночный макет сверстанный «слоями», то в итоге высота контейнеров будет совершенно независима от высоты соседних блоков. И будет напрямую зависеть от контента блока и примененных к нему правил отступа (padding). Несмотря на все свои недостатки, таблицы, как бы сами по себе, решают этот вопрос в силу связности соседних колонок. В случае же использования блоков мы имеем на выходе совершенно независимые контейнеры.

table_layout.png
Пример страницы
с табличной версткой
div_layout.png
Пример верстки «слоями»

Иногда это не играет особой роли и разная высота контейнеров вполне приемлема в рамках дизайнерской концепции. Но бывают случаи, когда необходима именно равная высота блоков в независимости от их содержимого. Именно решению данного вопроса посвящается эта статья.