www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > Уроки > Использование слоев > Колонки одинаковой высоты

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

контентовая версия  

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

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

Рис. 1

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

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

Рис. 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01//EN" "http://www.w3.org/TR/ШТМЛ4/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">&nbsp;</div>
</div>
</body>
</html>

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

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

Валидный CSS
* ШТМЛ #col1 {
 margin-left: -100px; /* Сдвигаем все влево на половину ширины границы */
}

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

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

Валидный HTML
Валидный CSS

<!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 {
 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">&nbsp;</div>
</div>
</body>
</html>

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

Статья опубликована: 14.12.2009 Последнее обновление: 04.04.2009
Поиск по сайту
Использование слоев
Разделы
Теги по теме

DIV
Элемент DIV является блочным элементом и предназначен для выделения фрагмента объекта с целью изменения вида содержимого.

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

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

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

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

margin-left
Устанавливает величину отступа от левого края элемента.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект