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

Влад Мержевич

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

На самом деле применение слоев для создания одинаковых по высоте колонок неверно по своей сути, поскольку противоречит идеологии слоев. А именно: высота слоя ограничена его содержимым и формируется автоматически. При этом высота колонок различается, что хорошо видно на рис. 1, где представленный макет построен именно на базе слоев.

Рис. 1

Рис. 1. Колонки, созданные с помощью слоев

Аналогичный документ, но сверстанный с помощью таблицы, будет иметь несколько другой вид, как показано на рис. 2.

Рис. 1

Рис. 2. Колонки, созданные с помощью таблицы

Таким образом, видно четкое разделение подходов к верстке:

если используются слои, то колонки должны иметь высоту, которая определяется содержимым слоя;
колонки одинаковой высоты строятся с помощью таблицы.

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

Сразу определимся, что создать макет с колонками одинаковой высоты слоями напрямую не получится. Любые методы лишь имитируют желаемый результат за счет использования фонового цвета, добавления границ или другими способами. Далее рассмотрим создание колонок с помощью границ.

Границы в качестве колонок

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

Пример 1. Создание колонок

#container {
border-left:
200px /* Ширина колонки */
solid /* Сплошная линия */
maroon; /* Цвет левой колонки */
background: #f0f0f0; /* Цвет фона правой колонки */
}

Поскольку элемент у нас всего один, то колонки, имитированные с помощью широкой вертикальной линии и фона, всегда имеют одну высоту. Остается расположить информацию точно поверх этого контейнера. Для левой колонки, назовем ее col1, следует задать ее ширину и с помощью стилевого атрибута float указать, что это плавающий элемент. Поскольку граница не является частью текстового блока, то требуется сместить слой col1 влево за счет добавления параметра margin-left с отрицательным значением, равным ширине границы (пример 2).

Пример 2. Формирование левой колонки

#col1 {
width: 200px; /* Ширина левой колонки */
float: left; /* Превращаем в плавающий элемент */
margin-left: -200px; /* Сдвигаем все влево на ширину границы */
color: #fff; /* Цвет текста в колонке */
}

В данном примере сочетание параметров float: left и margin-left с отрицательным значением позволяет расположить содержимое слоя прямо поверх границы. Для правой колонки col2 никаких дополнительных условий указывать не надо, текст будет располагаться как нам требуется.

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

Пример 3. Колонки одной высоты

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки одной высоты</title>
<style type="text/css">
#container {
border-left: 200px solid maroon; /* Цвет и ширина левой колонки */
background: #f0f0f0; /* Цвет фона правой колонки */
}

#col1 {
width: 200px; /* Ширина левой колонки */
float: left; /* Превращаем в плавающий элемент */
margin-left: -200px; /* Сдвигаем все влево на ширину границы */
color: #fff; /* Цвет текста в колонке */
}

#col1 p {
padding: 5px; /* Поля вокруг абзаца текста */
margin: 0; /* Обнуляем отступы */
}

#col2 {
padding: 5px;
}

div.clear {
clear: both; /* Убираем все плавающие элементы */
}
</style>
</head>
<body>
<div id="container">
<div id="col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>
<div id="col2">
Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div class="clear"> </div>
</div>
</body>
</html>

Данный пример работает в браузерах Firefox и Opera и некорректно отображается браузером Internet Explorer (IE). Это связано с ошибкой интерпретации границ этим браузером. Для создания универсального кода придется «подкладывать» для IE индивидуальный стиль, в частности, текущее значение margin-left для слоя col1 надо разделить пополам. В примере 4 показано, как сделать стиль, который будет пониматься только в IE.

Пример 4. Отступ для Internet Explorer

* HTML #col1 {
margin-left: -100px; /* Сдвигаем все влево на половину ширины границы */
}

Конструкция * HTML работает только в Internet Explorer, остальные браузеры ее пропустят. Универсальный код с учетом особенностей браузеров показан в примере 5.

Пример 5. Использование границ

В данном примере показано создание левой колонки фиксированной ширины, а правая колонка занимает все доступное пространство. Для случая, когда колонки надо поменять местами, используйте border-right вместо border-left; float: right вместо float: left и margin-right вместо margin-left. Остальные параметры останутся неизменными.

Статья опубликована: 14.12.2006

Последнее обновление: 04.04.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

coolreal

15.12.2006

и всеж колонка 2 имеет в ИЕ отступ 4-5 точек слева на высоту колонки 1.
а как от этого избавиться?
этот баг не дает спокойно жить.

p.s. При этом нужно, чтоб колонка 2 была резиновой

ChizZ

18.12.2006

А можно ли будет поместить оба слоя внутрь третьего с заливкой, совпадающей с заливкой левого слоя?

rijgol

18.12.2006

Ну и накой такой гемор. Дивы нужно пользовать, а не извращаться.

Влад Мержевич

19.12.2006

2coolreal
Абзацы (тег P) внутри колонки используются? Если да, то убери для абзаца отступ сверху.

Disaster Max

21.12.2006

For rijgol:
А гемор для того, чтобы заказчики были довольны...
А то вот так вот закажут темплейт исключительно на дивах, а потом не довольны, что, если в нем присутствуют таблицы (им же не объяснишь, что это 2 часа гемора с дивами и не факт, что при некоторых настройках броузера, возможно, данный метод работать не будет...).
Так что - клиент всегда прав!
И знать, как сверстать n-колоночный макет на дивах необходимо знать.
Единственное, что плохо, что нет универсального метода (типа height: 100% и все). Я знаю еще 3 способа "обмануть" броузеры, но в каждом, отдельно взятом, случае, нужно анализировать поведение контента, и правильно выбирать стратегию...

manson

21.12.2006

свойство display: table-cell кто-нибудь отменял? работает во всех нормальных браузерах)

Disaster Max

21.12.2006

display: table; не работает в ИЕ, а значит темплейт не будет кроссброузерным...
Наряду с этим св-вом для нормальных броузеров, надо использовать либо expression, либо <?xml version="1.0"?> и height: 100% для ИЕ.

Влад Мержевич

22.12.2006

manson, посмотри здесь
htmlbook.ru/css/display.html

IE6 почти никаких значений display не поддерживает. Если думаешь, что в 7-ой версии стало лучше, то ошибаешься.

SAiNT

23.12.2006

Влад, расскажи лучше, как грамотно сделать RSS-фид для сайта.
И ни в коем случае не пропадай так надолго :о)

DeaDRaiN

25.12.2006

А что делать, если обе колонки должны занимать по 50% ширины? Вроде как border не поддерживает ширину в процентах...

Влад Мержевич

26.12.2006

SAiNT, про RSS читай здесь.
naklon.info/texts/sleep/rss.htm

Влад Мержевич

26.12.2006

2 DeaDRaiN
Данный способ годится только для колонок, ширина которых задается в пикселах.

garA

05.01.2007

да уж.. прикольный метод.. надо взять на вооружение

coolreal

09.01.2007

2Влад Мержевич
нет, пример твой без изменений, единственно, для лучшего восприятия сделал
#col2 {
padding: 5px;
padding-left:0;
}
и вот в ИЕ эта гадость, я уже всех достал... может у тебя будет ответ

Влад Мержевич

10.01.2007

2coolreal
Да, я понял в чем проблема, но к сожалению, обойти ее данным методом не получится. В IE всегда остается небольшое расстояние между границей и контентом.

Рекомендую использовать другие способы создания колонок, на этом сайте они описаны.

coolreal

11.01.2007

2Влад Мержевич
пока ждал от вас ответа, не сидел на месте, а искал. И на сайте у А.Лебедева нашел небольшой пример, как убрать эту беду... к сожалению именно к вашему примеру мне не удалось применить, но на своих сайтах я е? протестил и он работает.
Надеюсь вам он тоже пригодится и ваши примеры будут еще более интересными и "продвинутыми"

rijgol

18.01.2007

2 Disaster Max
body,html
{
height: 100%;
}
и любой див у вас вытянется на 100%

gangrel

26.01.2007

2rijgol
А Вы пробовали это применить при контенте не вмещающемся в пределах одной страницы(при появлении полосы прокрутки)?

lexus

01.02.2007

Попробовал применить этот метод для трех колонок

Работает, только текст в третьей колонке почему-то на строку или две ниже, чем в первых двух. Что подскажете?

Влад Мержевич

02.02.2007

2 lexus
Параграф не использовал? Для тега <P> характерны отступы по умолчанию, они и смещают текст вниз.

lexus

02.02.2007

Нет, не использовал. С параграфом еще ниже получается...
Решил так: задал
span {
position: relative;
top: -30px;
}
Помогло...

Rodger

22.03.2007

совсем не обязательно такой огород городить
* HTML #col1 {
margin-left: -100px; /* Сдвигаем все влево на половину ширины границы */
}

можно гораздо компактнее
#col1 { margin-left: -200px; //margin-left: -100px; }

значение после // поймет только ie

wils0n

16.04.2007

наблюдается такой прикол в ИЕ:
если в первой коолнке много текста, а во второй мало, то при показе текст во второй колонке не виден. Но! Если область второй колонки выделить мышой, то текст появляется и потом не пропадает даже если снять выделение. Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки одной высоты</title>
<style type="text/css">
#container {
border-left: 200px solid maroon; background: #f0f0f0;
}
#col1 {
width: 200px; float: left; margin-left: -200px; color: #fff;
}
* HTML #col1 {
margin-left: -100px;
}
#col2 {
padding: 5px;
}
div.clear {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="col1">
Траншея была неглубокая, сухая и пыльная - наспех отрытая за ночь в
едва оттаявшем от зимних морозов, но уже хорошо просохшем пригорке. Чтобы
чересчур не высовываться из нее, Волошин привычно склонялся грудью на
бруствер, пошире расставив локти. Однако долго стоять так при его высоком
росте было утомительно; меняя позу, комбат неловко повернул локоть, и ком
мерзлой земли с глухим стуком упал на дно. Тотчас в траншее послышался
обиженный собачий визг, и на осыпавшуюся бровку мягко легли две широкие
когтистые лапы.
</div>
<div id="col2">Колонка 2</div>
<div class="clear"> </div>
</div>
</body>
</html>
Надпись "Колонка 2" не видна

Влад Мержевич

16.04.2007

В IE6 все видно.

wils0n

16.04.2007

В том-то и дело, что нет. Но проблема решилсь изъятим   из последнего дива. Сам не знаю почему

JRWisard

08.06.2007

Этот пример не работает с фоновыми изображениями.
Можно попробовать сделать вложенные дивы, у каждого из которых будет свой
background-image, background-position, и, конечно, 100% высоты у всех вложенных.
Тогда это будет работать даже при тр?х колонках

Cyrill

14.07.2007

про   --

О да! Это отдельная песня про   и <br> в IE!....

)))

Ночной кодер

11.08.2007

Мдя.... Столько проблем. Создал таблицу по старинке - и все окей.

А то все это хаки ждя IE и все такое, приводят потом к плачевным последствиям с выходом новых браузерят.

Кто-то читал на 3dnews 6 пунктов правильного программинга от программиста IBM ? Вот одна из фраз в статье означала следующе - Хватит умничать, делайте так, чтобы эта факинг херовина работала.

Ребята, посмотрите на свой здоровенный CSS, в котором постронее лицо просто запутается, когда туда добавиться новые стили.

Слезы... Две колонки таблицы и миниум стульев - и все готово. А вы тут мозги морочите всем.

)) Хи. Спасибо за внимание, простите за опечатки :: 01:53 и мне факинг профиг сейчас.

Евгений

05.09.2007

Очень интересная статья! Но мне нужно, чтобы повторялся узор, выведенный через background (2 пикселя высоты), а не заливка цветом. Как проделать такой фокус на последнем примере?

Влад Мержевич

06.09.2007

Данным способом фоновый рисунок использовать проблематично.

pashadesigner@mail

11.09.2007

Все нормально

))) Вот улучшеный код

)))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}

#container {
border-left: 200px solid maroon; background: #f0f0f0;
}
#col1 {
width: 200px;
float: left;
margin-left: -200px;
color: #fff;
}
* HTML #col1 {
margin-left: -100px;
}
#col2 {
padding: 0px;
}
div.clear {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="col1">Колонка 1</div>
<div id="col2">
<p>Колонка 2</p>
<p> </p>
</div>
<div class="clear"> </div>
</div>
</body>
</html>

Eugene Bores

28.09.2007

<html>
<head>
<title></title>
<style type="text/css">
body {
width:600px;
margin:0 auto;
}

#content {
float:right;
width:400px;
padding: 5px 10px;
}

#sidebar {
float:left; width:150px;
background-color: Red;
padding: 5px 10px;
}

#main {
background-color: Yellow;
width:100%;
overflow:hidden;
}

#header,
#footer {
background:#238; color:white;
}

#header{
height: 50px;
}
#footer {
clear:both;
padding: 2px 10px
}

#content,
#sidebar {
padding-bottom:32767px;
margin-bottom:-32763px;
}

ul,
li {
float:left;
list-style:none;
margin:0; padding:0;
}

li {
padding:2px 10px;
font:Bold Small Tahoma;
background:#35C; color:white;
border:solid 1px; border-color:#46F #238 #238 #46F;
}

a {
color:white; text-decoration:none;
}
-->
</style>
</head>
<body>
<body>
<div id="header">
Lorem ipsum dolor sit amet
<ul>
<li><a href="/">Начало</a></li>
<li><a href="catalog/">Каталог</a></li>
<li><a href="basket/">Корзина</a></li>
<li><a href="help/">Справка</a></li>
</ul>
</div>

<div id="main">
<div id="content">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda. Et tam neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam makes one wonder who would ever read this stuff? Bis nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigue excepteur sint occae. Et harumd dereud facilis est er expedit distinct. Nam libe soluta nobis eligent optio est congue nihil impedit doming id Lorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incommod quae egen ium improb fugiend. Officia deserunt mollit anim id est laborum Et harumd dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda et tam. Neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam is nostrud exercitation ullam mmodo consequet. Duis aute in voluptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent. Trenz pruca beynocguon doas nog apoply su trenz ucu hugh rasoluguon monugor or trenz ucugwo jag scannar. Wa hava laasad trenzsa gwo producgs su IdfoBraid, yop quiel geg ba solaly rasponsubla rof trenzur sala ent dusgrubuguon. Offoctivo immoriatoly, hawrgasi pwicos asi sirucor.Thas sirutciun applios tyu thuso itoms ghuso pwicos gosi sirucor in mixent gosi sirucor ic mixent ples cak ontisi sowios uf Zerm hawr rwivos. Unte af phen neige pheings atoot Prexs eis phat eit sakem eit vory gast te Plok peish ba useing phen roxas. Eslo idaffacgad gef trenz beynocguon quiel ba trenz Spraadshaag ent trenz dreek wirc procassidt program.
</div>

<div id="sidebar">
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>

<div id="footer">Su havo loasor cakso tgu pwuructs tyu.</div>
</body>
</body>
</html>

Eugene Bores

28.09.2007

Коментарий к предыдущиму:

#content,
#sidebar {
padding-bottom:32767px;
margin-bottom:-32763px;
}
По идее значения должны совпадать по модулю, но мне захотелось небольшого паддинга снизу. Недостаток такого способа в том, что если хотите добавить фоновую картинку выравненную по дну контейнера, то ничего не получиться. Вернее получиться, но ее видно не будет.
И ещ? момент IE в плавающих блоках удваивает маргины, так что их надо спечиально для IE указывать
* html #id{margin: 3px}
Такое работает только в IE.
Кстати Влад, вы не планируете написать статью о так называемых "holly hacks"?
Очень было бы полезно прочитать об этом в одном месте.

Lumos

01.03.2008

IE - Кака во всех отношениях. Страницы не правильно рендерит, стли не понимает. Вместо ID может захавать NAME.. ужасъ!

imegrant

21.03.2008

В ие 6 левая колонка не видна, виден только бордер, как это исправить?

imigrant

21.03.2008

Уже нашел как...нужно левую колонку взять в див и прописать position:relative;

perlaws

27.03.2008

Да, так что делать с фоном-то? обязательно надо выровнять по нижнему краю. Как?

prihod

17.04.2008

Еще хотелось бы узнать почему при помещении во внутрь <div id="content">
Блока вида:

<div class="info_clients_d">
<div id=?w? class="info_clients">
<div id=?w1? class="dd"></div>
</div>

Со стилем
.info_clients_d
{

position : relative;
width : 266px;
height:277px;

}

.info_clients
{

position : relative;
margin-top:15px;
background-image:url(../img/info_clients/cl_fon.jpg);
background-repeat: no-repeat;
width : 266px;
height:183px;
z-index:302;

}

.dd
{
position : relative;
background-image:url(../img/info_clients/footer_cb.jpg);

background-repeat: no-repeat;
background-position: bottom left;
width : 266px;
/*height : 277px;*/
height : 183px;
z-index:40;
}

не получается подложить див с id=?w1?
Под див с id=?w?

40a

12.05.2008

Колонки одинаковой высоты. Не зависимо от наполнения информацией любой из колонок, они всегда будут одинаковой высоты, что позволяет использовать независимый background-color или background:url(...) для любой из колонок. http://trifler.ru/blog/i/layouts/left-content.htm

леша

01.06.2008

а как написать 6фотографий ровно по центру окна браузера зарание спасибо bankirovaleksey@mail.ru

Вадим М.

11.06.2008

Ребят, как можно использовать этот при?м только не на 2 колонки, а на 3?

DeadMan

24.07.2008

Парни, не забывайте про

* {
margin: 0;
padding: 0;
}

часто многие проблемы в IE таким образом решаются. Но не все.

Tihonko

29.07.2008

Ломаю голову и не могу догнать почему если не поставить в конце слой с атрибутом clear: both, то высота границы не равна высоте левой колонке. Левая колонка ведь тоже в контейнере...

andrey

01.08.2008

Ребят, как можно использовать этот при?м только не на 2 колонки, а на 3,4,5 ?

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

Границы в качестве колонок

Комментарии к статье

Добавить комментарий