HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

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

Рассмотрим один из известных самых простых способов задавания плавающим колонкам одинаковой высоты.

Вот, собственно, сразу код:

<!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=utf-8" />
<title>float колонки одинаковой высоты</title>
<style type="text/css">
.container {
overflow:hidden;
zoom:1;
}
.col1, .col2, .col3 {
padding-bottom:30000px;
margin-bottom:-30000px;
}
.col1 {
float:left;
width:25%;
background:#CCC;
}
.col2 {
float:left;
width:49%;
background:#0CF;
}
.col3 {
float:left;
width:25%;
background:#6C3;
}
</style>
</head>
<body>
<div class="container">
<div class="col1">
Демократия стала прикрытием для безраздельного господства реальной силы,
которой является Левая колонка. Левая колонка – это прекрасно.
Вчера уборщица зацепила шваброй провода, и Левая колонка временно перестала работать.
Но сбой быстро исправили. Я никогда не думал, что Левая колонка придет ко мне и скажет:
«Я – Левая колонка». Последний школяр сейчас знает о Левая колонка куда больше,
чем знали Декарт и Паскаль. Но способен ли школяр мыслить как они? Мне кажется,
Левая колонка соединяет людей, несмотря на возгласы скептиков.
</div>
<div class="col2">
Как нормально уволиться с работы? Уже понаписывали много вариантов увольнения,
но они какие-то очень странные и нелогичные. Создается впечатление, что люди уходят со словами:
«После меня делайте что хотите». А не проще сказать: «Центральная колонка вам!» И спокойно уйти.
Центральная колонка – испытание идеи на прочность. Вчера вышел из бара в 4 утра.
И насладился зрелищем Центральная колонка на фоне ночного неба. Как-то сидели мы с друзьями,
пили пиво, обсуждали Центральная колонка. В результате посиделок решили, что Центральная колонка
на земле становится все меньше и меньше, на всех не хватит. Звания «Самая элегантная Центральная колонка»,
«Центральная колонка года» вызывают у их обладателей законную гордость. Вот решил ты повесить полку.
Залез на лестницу, просверлил дырку, слез с лестницы, положил дрель, взял крепеж, залез на лестницу,
закрепил его, слез с лестницы, взял полку, залез на лестницу. С Центральная колонка можно сократить
это метание вверх-вниз до минимума. Сегодня занятие Центральная колонка – увлекательное творческое занятие,
которое приносит удовольствие и зрителям, и исполнителям. В рай попадает тот, кто в борьбе,
сражаясь не испачкал себе руки Центральная колонка. Становится популярным новый вид отдыха:
вас выбрасывают с вертолета в совершенно незнакомом месте с двухнедельным запасом провизии и воды.
При этом вас убеждают, что в течение всего этого времени вы не встретите Центральная колонка.
На всякий случай, есть кнопка экстренного вызова спасателей. Только сильные эмоции могут оживить
Центральная колонка и вдохнуть в нее искру жизни. А вот «Акнолок яаньлартнец» – это Центральная колонка наоборот.
</div>
<div class="col3">
В нашей жизни Правая колонка всегда торжествует. Помните, Правая колонка – ваш праздник. Экспериментируйте.
Фантазируйте. Правая колонка – идеальный праздник для воплощения самой безудержной мечты в реальность.
В общем, работаем с Правая колонка без велосипедов. Поверь в себя – Правая колонка. В общем,
расширяем мы с вами географию нашей полемики на славу Правая колонка и все за счет нашего отечественного
налогоплательщика. Хочу оговориться, что дальнейшее обсуждение впрямую применимо только к Правая колонка.
Секрет создания Правая колонка всегда строго хранился и передавался от мастера к ученику.
Стали очень популярны одноактные балеты: «Блудная Правая колонка» и «Симфония до Правая колонка».
Ой, простите, «Симфония до мажор». Сетовать на Правая колонка нечего. Просто таков порядок вещей,
именуемых современной цивилизацией. Извините, пойду налью себе немного сока. Но потом мы вернемся
к разговору. А вот «Акнолок яаварп» – это Правая колонка наоборот.
</div>
</div>
</body>
</html>

Как видите, вся фишка метода заключается в задавании бОльшего нижнего паддинга и такого же отрицательного нижнего маргина, и оборачивании всего этого в контейнер с overflow:hidden.

Замечание, в блоке .container используется zoom:1. Это для включения haslayout-а в ие6. Хотя и без него вроде нормально отображается (по крайней мере у меня на эмуляторе ие6). Но т.к. все советуют его ставить, то и вы его ставьте, лишним не будет

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

Метки: div, float, height

Запись опубликована 13.07.2009 в 17:35 и размещена в рубрике css, html. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (5) на “Float колонки одинаковой высоты”

Кулинар:

22.07.2009 в 05:11

У вас проблема с версткой, кажется: в Opera 9.27 все блоки разъезжаются
admin:

22.07.2009 в 11:49

В Опере 9,27 не проверял, т.к. очень старый. Нада будет посмотреть.
dos:

16.12.2009 в 07:14

Не годится для реальных проектов.
Если обратиться к метке index.html#l1, то всё что окажется выше метки, отрежется overflow.
Григорий:

19.04.2011 в 13:53

Хорошая статья.

Я не так давно перевел похожую статью. Можно почитать здесь: Искусственные столбцы
Павел:

19.04.2011 в 14:09

Для включения hasLayout-a можно использовать width: 100%.

Контейнеру это будет лучше идти, чем zoom: 1.

Ну и многие могут спросить, а нафиг, собсно, owerflow: hidden. А это для того, чтобы контейнер пересчитал свою высоту при наличии наших колонок, которые из-за float: left выпадают из нормального потока.