Колонки одинаковой высоты, самый простой способ
Буржуи как обычно мудрят там, где можно сделать все намного проще.
Способы создания колонок в указаном посте слишком сложны.
Хочу рассказать про самый простой и логичный, на мой взгляд, способ сделать колонки одинаковой высоты.
Кто придумал этот способ не знаю. Но судя по комментариям к этому посту знают о нем немногие, в результате пошло мнение что таблицы в данном случае логичнее и лучше.
И так. Из html-кода:
Сделаем колонки одинаковой высоты.
Осталось только задать фон для колонок и сделать их плавающими. Работает везде.
Все по стандарту. Делаем большой паддинг снизу, это дает бэкграунд вниз. Ровно таким маргином компенсируем отступ. Родительский див отрезает лишнее.
Пример
UPD. _zoom:1 можно заменить на width:100%, эффект для IE6 тот же.
Способы создания колонок в указаном посте слишком сложны.
Хочу рассказать про самый простой и логичный, на мой взгляд, способ сделать колонки одинаковой высоты.
Кто придумал этот способ не знаю. Но судя по комментариям к этому посту знают о нем немногие, в результате пошло мнение что таблицы в данном случае логичнее и лучше.
И так. Из html-кода:
<div class="cols">
<div class="col1">Текст1</div>
<div class="col2">Текст2</div>
<div class="col3">Текст3</div>
</div>
* This source code was highlighted with Source Code Highlighter.Сделаем колонки одинаковой высоты.
.cols{
overflow:hidden;
_zoom:1;/*Для 6-го IE, задаем hasLayout, на эту тему есть много постов на хабре*/
}
.cols .col1,.cols .col2,.cols .col3{
padding-bottom:10000px;
margin-bottom:-10000px;
}
Осталось только задать фон для колонок и сделать их плавающими. Работает везде.
Все по стандарту. Делаем большой паддинг снизу, это дает бэкграунд вниз. Ровно таким маргином компенсируем отступ. Родительский див отрезает лишнее.
Пример
UPD. _zoom:1 можно заменить на width:100%, эффект для IE6 тот же.
комментарии (134)