воскресенье, 12 июля 2009 г.

CSS колонки одинаковой высоты

Недавно мне задали вопрос, как бы я сделал в макете колонки одинаковой высоты. Предложил использовать способ с нижними «паддингами» и «маргинами». Или, русским языком – «полями» и «отступами».


CSS колонки одинаковой высоты

Код HTML:

<div class="cols">
<div class="col1">Налево пойдешь – коня потеряешь</div>
<div class="col2">Прямо пойдешь – лбом упрешься</div>
<div class="col3">Направо пойдешь – лучше не ходи..</div>
</div>


Стили CSS:

.cols{
overflow:hidden;
width:100%;/* Задать свойство hasLayout для IE6;
Можно использовать _zoom:1 (невалидное свойство) */
}
.cols .col1,.cols .col2,.cols .col3{
padding-bottom:10000px;
margin-bottom:-10000px;
}


UPD 2009.08.07
Стили CSS для отображения в виде колонок с разным цветом фона:

.cols .col1{width:25%; float:left; background:#999999;}
.cols .col2{width:50%; float:left; background:#E0E9EF;}
.cols .col3{width:25%; float:left; background:#5588AA;}


Пример реализации с Хабрахабра.

23 Комментариев :

Илья комментирует...

Во всех ие появляется отсупт в 10000 пикселей. а в гугл хром тоже коряво отображается.
А вот опера и фаерфокс отображают нормально.

Croaker комментирует...

Корректно отображается в Firefox, Chrome, Opera, Safari, а так же в IE 5.5, 6, 7 и 8.
Если документ – действительно HTML.
Единственное, что могу еще добавить – это стили для отображения колонок. Без них как-то непонятно.

Анонимный комментирует...

А если документ XHTML?
Пытаюсь использовать данный метод в шаблоне Joomla, так в IE8 колонка тянется далеко за футер.

Croaker комментирует...

Это и есть для XHTML, только по этой спецификации и верстаю. Работает во всех браузерах, как описано; как в Transitional, так и в Strict версиях.
Может, стили где-то перекрываются?

Анонимный комментирует...

Нет, стили не перекрываются. :(
Единственная разница, что я делаю 2 колонки (левая и основная).
Кстати, обе колонки тянутся вниз. Это я понял, когда основной колонке добавил цвет.

Croaker комментирует...

Вот бы глянуть :)

Анонимный комментирует...

С удовольствием покажу, но как вставить сюда код? А то ругается на меня: "Ваш код HTML не может быть принят: PHP, ASP, and other server-side scripting is not allowed." :(

Croaker комментирует...

Нет уж, в комменты мне этого добра не надо.

Размести онлайн или выложи получившийся код на Пасти.

Анонимный комментирует...

http://pastie.org/private/fiagj4hiqo9fp3mnh4qq

http://pastie.org/private/xvigok1dg7zohsimwc4oa

Вроде так, если ничего не напутал спросонья. :)

Croaker комментирует...

Сделал одной страницей. IE показал фигню, но проблема была не в высоте колонок.
http://pastie.org/private/gfzzld4rd6pdy5cmr54q
Мои пометки в CSS с ремаркой REM:

Анонимный комментирует...

Благодарю!
Отдельным файлом работает, в теме Джумлы нифига не работает. Буду рыть.

Анонимный комментирует...

Кстати, а в чем была проблема, которую нашли вы?

Анонимный комментирует...

Ничего не получается нарыть. :(

Вот здесь сохранил код страницы, убрал все лишнее, и перенес стили в файл с кодом.
http://pastie.org/private/9twkt1tddaqeudtkjxe1kw

Croaker комментирует...

В прошлый раз в IE левая колонка уползала вправо.

Если отключить position: relative, то в Internet Explorer отображается как задумано:
.middle_container .column {
/* position: relative;*/
}

P.S. а xml:lang="it-it" (язык: итальянский) это так и должно быть?

Анонимный комментирует...

Да, язык итальянский.

Кстати, включаю в IE8 режим совместимости с предыдущими версиями - показывает, как надо. Отключаю - "индийское жилище" (с)

[quote]Если отключить position: relative, то в Internet Explorer отображается как задумано:[/quote]

Дико благодарен! Теперь, действительно, показывает, как надо и в режиме совместимости и без оного.

Будете в Италии, звоните, угощу пивом. :)

Croaker комментирует...

Пожалуйста! К сожалению, в солнечную Италию в ближайшее время вряд ли, вряд ли :(.
Да, и в XHTML «одинарные» теги (img, br, hr) должны быть закрыты: <br />.
И ко мне лучше на «ты»
(надо будет вынести это в футер дабы не повторяться).

Анонимный комментирует...

Ок! На ты, так на ты. :)

Про теги я знаю, просто спешил. :)

Теперь вот думаю, как сделать, чтобы нижняя часть обеих колонок была с рамкой и отступом, как по бокам и вверху.

Анонимный комментирует...

Привет!
Это опять я. :)
Возик вопрос, как сделать, чтобы внутри такой колонки дочерний div всегда прижимался к низу родительского, не зависимо от объема информации в соседней колонке? bottom:0 не помогает. :(

С уважением,
Андрей из Италии. :)

Croaker комментирует...

Привет, Андрей!

Делал я, кажется, что-то подобное месяца полтора назад. Тогда пришлось использовать Javascript. Постараюсь раскопать исходный пример на новой системе и что-нибудь подскажу.

Анонимный комментирует...

Буду весьма благодарен. :)

Croaker комментирует...

Я помню. Но пока нет возможности поразбираться.

Есть быстрый совет: чтобы не плясать с джаваскриптом и кроссбраузерными премудростями CSS, можно разместить нужный «плавающий» (точнее – «тонущий») элемент в самом нижнем блоке. И отпозиционировать его используя position:relative;

Анонимный комментирует...

Благодарю!
Обязательно попробую :)

С уважением,
Андрей

Анонимный комментирует...

дякую за дуже просто і елегантне рішення

Отправить комментарий

Жги!