Особенностью табличной верстки является то, что колонки, получаемые с помощью ячеек таблицы, имеют одну высоту. Это неудивительно, поскольку ячейки взаимосвязаны и при повышении высоты одной ячейки, соответственно увеличивается высота рядом расположенных ячеек. Многие разработчики пытаются произвести подобный эффект и с помощью слоев, т.е. сделать их взаимосвязанными и одной высоты, независимо от объема содержимого.
На самом деле применение слоев для создания одинаковых по высоте колонок неверно по своей сути, поскольку противоречит идеологии слоев. А именно: высота слоя ограничена его содержимым и формируется автоматически. При этом высота колонок различается, что хорошо видно на рис. 1, где представленный макет построен именно на базе слоев.
Рис. 1. Колонки, созданные с помощью слоев
Аналогичный документ, но сверстанный с помощью таблицы, будет иметь несколько другой вид, как показано на рис. 2.
Рис. 2. Колонки, созданные с помощью таблицы
Таким образом, видно четкое разделение подходов к верстке:
Игнорирование этих принципов приводит к усложнению кода и появлению ошибок в отображении документа браузерами, как следствие, повышается время на разработку сайта и его отладку. Поэтому приведенный далее материал должен восприниматься не как руководство к действию, а предназначен для лучшего понимания основ работы со слоями и стилями.
Сразу определимся, что создать макет с колонками одинаковой высоты слоями напрямую не получится. Любые методы лишь имитируют желаемый результат за счет использования фонового цвета, добавления границ или другими способами. Далее рассмотрим создание колонок с помощью границ.
Суть метода в следующем — добавляем слева или справа от элемента границу, ширина которой совпадает с шириной одной из колонок. Понятно, что границы предназначены совсем для других целей, но в данном случае такое их использование позволяет получить желаемый результат. Для этого создаем слой с именем container и для него устанавливаем стиль, как показано в примере 1.
Пример 1. Создание колонок
Поскольку элемент у нас всего один, то колонки, имитированные с помощью широкой вертикальной линии и фона, всегда имеют одну высоту. Остается расположить информацию точно поверх этого контейнера. Для левой колонки, назовем ее col1, следует задать ее ширину и с помощью стилевого атрибута float указать, что это плавающий элемент. Поскольку граница не является частью текстового блока, то требуется сместить слой col1 влево за счет добавления параметра margin-left с отрицательным значением, равным ширине границы (пример 2).
Пример 2. Формирование левой колонки
В данном примере сочетание параметров float: left и margin-left с отрицательным значением позволяет расположить содержимое слоя прямо поверх границы. Для правой колонки col2 никаких дополнительных условий указывать не надо, текст будет располагаться как нам требуется.
Из-за того, что плавающий элемент располагается поверх линии границы, может получиться, что текст в левой колонке выходит за пределы цветного прямоугольника. Чтобы этого не произошло, следует отменить действие параметра float за счет использования атрибута clear. Окончательный код показан в примере 3.
Пример 3. Колонки одной высоты
Данный пример работает в браузерах Firefox и Opera и некорректно отображается браузером Internet Explorer (IE). Это связано с ошибкой интерпретации границ этим браузером. Для создания универсального кода придется «подкладывать» для IE индивидуальный стиль, в частности, текущее значение margin-left для слоя col1 надо разделить пополам. В примере 4 показано, как сделать стиль, который будет пониматься только в IE.
Пример 4. Отступ для Internet Explorer
Конструкция * HTML работает только в Internet Explorer, остальные браузеры ее пропустят. Универсальный код с учетом особенностей браузеров показан в примере 5.
Пример 5. Использование границ
<!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">Колонка 1</div>
<div id="col2">Колонка 2</div>
<div class="clear"> </div>
</div>
</body>
</html>
В данном примере показано создание левой колонки фиксированной ширины, а правая колонка занимает все доступное пространство. Для случая, когда колонки надо поменять местами, используйте border-right вместо border-left; float: right вместо float: left и margin-right вместо margin-left. Остальные параметры останутся неизменными.
Copyright © Влад Мержевич
www.htmlbook.ru