Выравнивание блоков div по высоте

В настоящее время табличная вёрстка встречается очень редко – она устарела так же, как и Internet Explorer 6. Вместо неё используется блочная, которая имеет больше возможностей и в ряде случаев проще. Но у блочной вёрстки есть своя проблема – сложно выровнять блоки по высоте, сделав их одинаковыми, что очень просто достигается при использовании таблиц.

В сети описано много способов, как этого добиться, но почти все они имеют недостатки – нужно либо использовать jQuery с плагинами, либо заранее устанавливать для блоков высоту с запасом.

В то же время есть более простой способ сделать это, причём работающий во всех современных браузерах. Важным моментов является возможность сделать это исключительно средствами HTML и CSS, не прибегая к помощи скриптов. Также отдельно отмечу, что этот способ работает не только в современных версиях Firefox и Google Chrome, но и в Internet Explorer 11 и даже в старой Opera 12.17.

Этот метод выравнивания блоков использует свойство display, позволяющее элементам страницы вести себя так, будто на самом деле они являются чем-то другим. В частности, в данном примере мы заставим блоки вести себя так, будто они являются таблицами. Итак, к делу.

В первую очередь создадим блок-обёртку, а в нём ещё три для столбцов. Сразу присвоим им классы:

<div class="col-container">
    <div class="col1">Текст для первого блока</div>
    <div class="col2">Текст для второго блока</div>
    <div class="col3">Текст для третьего блока</div>
</div>

Для контейнера в стиле устанавливаем ширину, отступы и способ отображения:

.col-container {
 display: table;
 width: 1200px;
 margin: 6px auto 0px auto;
}

Для вложенных в него элементов задаём способ отображения и отступы от границ блока до текста:

.col-container > div {
 display: table-cell;
 padding: 8px;
}

Для стилей col1, col2 и col3 задаём только ширину (в моём примере – 20%, 60% и 20%) и цвет фона.

В результате имеем расположенные по горизонтали три блока, которые имеют одинаковую высоту, установленную по наибольшему из них.

Также этот способ решает ещё одну задачу – часто на сайтах боковые колонки на определённых страницах не отображаются. Если для центрального блока указать ширину как auto, то она станет «резиновой», меняя свою ширину в зависимости от наличия боковых колонок.

Скачать готовый файл можно у меня на сайте.