В статье решается проблема выравнивания по высоте контейнеров с текстом разного объема при использовании принципов блочной верстки.

При написании информационных ресурсов довольно часто прибегают к многоколоночной схеме. Другими словами содержимое страницы разбивается на несколько колонок. Такой принцип чаще используется для текстовой части контента. При этом объем текста в каждой колонке может быть разный. Возникает вопрос, каким образом сделать так, чтобы при разной величине текста выровнять по высоте колонки, причем изначально высота блока остается неизвестной. Ниже представлена схема двух разных случаев

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

Фоновый рисунок

Итак, идея вполне предсказуемая и заезженная (так как многие проблемы решаются заменой картинкой), она имеет ряд преимуществ, которые нельзя не отметить:

• высокие показатели кроссбраузерности;
• нет никаких проблем с валидацией;
• используется минимальное количество вспомогательных блоков, что сокращает объем HTML-кода.

Как обычно, не бывает плюсов без минусов:

• нагрузка на сервер за счет использования дополнительного количества картинок;
• работает только в том случае, если известна точная ширина колонок.

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

Высоту этой линии рекомендуется использовать величиной 1 пиксель, для экономии размера изображения. Устанавливаем циклическое повторение этой картинки по оси ординат и получаем колонки одинаковой высоты (по крайней мере визуально). Ниже представлен код, с помощью которого реализуется данный метод

HTML

<div class="background">
	<div class="left"> </div>
	<div class="center"> </div>
	<div class="right"> </div>
</div>

CSS

.fon {
	width: 600px;
	background: url(fon.png) repeat-y;
	float: left;
 
}
.left {
	width: 200px;
	float: left;
}
.center {
	width: 200px;
	float: left;
}
.right {
	width: 200px;
	float: left;
}

В итоге в браузере получаем такую картину:

margin + padding + overflow

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

Для этого в код записываем

HTML

<div class="background">
	<div class="left"> </div>
	<div class="center"> </div>
	<div class="right"> </div>
</div>

CSS

.background {
	width: 600px;
	overflow: hidden;
}
.left {
	width: 200px;
	float: left;
	background: #fc7777;
	padding-bottom: 20000px;
	margin-bottom: -20000px;
}
.center {
	width: 200px;
	float: left;
	background: #7780fc;
	padding-bottom: 20000px;
	margin-bottom: -20000px;
}
.right {
	width: 200px;
	float: left;
	background: #fcaf77;
	padding-bottom: 20000px;
	margin-bottom: -20000px;
}

Результат в браузере будет аналогичен предыдущему способу.

Для этого метода будут характерны следующие положительные эффекты:

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

Недостатки:

• в старых версиях браузера Opera не работает, так как этой программой неверно трактуется свойство overflow.

Метод дополнительных оберток

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

HTML

<div class="background1">
	<div class="background2">
		<div class="background3">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
	</div>
</div>

CSS

.background1 {
	width: 100%;
	background: #fc7777;
	float: left;
	position: relative;
	right: 30%;
}
.background2{
	width: 100%;
	background: #7780fc;
	float: left;
	position: relative;
	right: 40%;
}
.background3 {
	width: 100%;
	background: #fcaf77;
	float: left;
}
.left {
	width: 30%;
	float: left;
	overflow: hidden;
	position:relative;
	left:70%;
}
.center {
	width: 30%;
	float: left;
	overflow: hidden;
	position:relative;
	left:70%;
}
.right {
	width: 39%;
	float: left;
	overflow: hidden;
	position:relative;
	left:70%;
}

Результат в браузере будет полностью совпадать с предыдущими методами.

Для этого метода стоит отметить следующие положительные характеристики:

• поддерживается всеми браузерами;
• соответствует принципам так называемой «резиновой верстки»;
• сохраняет показатель валидности кода.

Нежелательный эффект рассматриваемой верстки:

• большое количество дополнительных контейнеров (их количество соответствует числу колонок — обязательное условие для работы метода).

В каких браузерах работает?