) можно вообще не использовать. Я привел его для большей наглядности, но в реальной верстке его можно опустить.

2. Использование margin, padding + overflow:hidden

#middle{width:100%; overflow:hidden; } #left-column{ float:left; margin-bottom:-32000px; padding-bottom:32000px; width:20%; } #content{ float:left; margin-bottom:-32000px; padding-bottom:32000px; width:59.8%; } #right-column{ float:left; margin-bottom:-32000px; padding-bottom:32000px; width:20%; }

Способ уже немного посложнее, но тоже ничего сверхумного. Радует то, что способ работает во всех браузерах. Суть метода:

• Делаем див в котором будем размещать все наши колонки
• Создаем внутри этого дива еще три дива которые собственно и будут теми самыми колонками.
• Выравниваем колонки по горизонтали с помощью float:left;
• Присваиваем всем колонкам margin-bottom:-32000px; padding-bottom:32000px;
• Присваиваем overflow:hidden для родительского дива.

Если непонтяно что мы тут сделали, то объясню подробнее.

Что делает свойство margin-bottom:-32000px?
Оно растягивает колонку вниз на 32000px.

Что делает свойство padding-bottom:32000px?
Оно делает отступ от нижнего края блока до контента в 32000px.

Что делает свойство overflow:hidden у родительского дива?
Оно скрывает ту часть блока в которой нет контента.

Если просуммировать то что я написал выше, то получается, что мы растянули пустое пространство снизу каждой из колонок, и обрезаем его по высоте той колонки в которой больше всего контента. По факту пустое пространство тянется еще очень долго вниз, но пользователь его не видит за счет overflow:hidden.

3. Вложенные колонки

#middle{width:100%;} #left-wrap{ width:20%; position:relative; } #content-wrap{ width:300%; margin-right:-300%; position:relative; left:100%; } #right-wrap{ width:33.1%; margin-right:-33.3%; position:relative; left:100%; } #left{ float:left; width:100%; margin-right:-100%; position:relative; left:-400%; } #content{ float:left; width:300%; margin-right:-300%; position:relative; left:-300%; } #right{ float:left; width:100%; }

Для большей ясности советую изучить пример в котором все это уже работает:

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

Первый шаг. Плацдарм

Создадим родительский див в котором будем располагать все наши колонки

Второй шаг. Создаем оформительские дивы

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

Третий шаг. Создаем дивы с контентом

В последнем из трех вложенных дивов создадим еще три дива, но уже параллельно. Последние три дива не надо вкладывать друг в друга. Эти параллельные дивы будут отвечать за контент каждой из колонок. В них будет расположен текст и любой другой html.

Четвертый шаг. Определяемся с шириной оформительских колонок

Ширина всей страницы (ширина плацдарма) - 100%. Ширина левой колонки 20%. Выставим для левого оформительского дива ширину 20%. Пока все просто.

Ширина центральной колонки 60% от ширины страницы. Так как центральная колонка вложена в левую, то ее ширина будет рассчитываться относительно левой колонки(родителя). Центральная колонка в три раза шире чем левая, то есть нужно выставить ширину для центральной колонки в 300%.

Ширина правой колонки 20% от ширины страницы. Так как правая колонка вложена в центральную, то ее ширина так же будет рассчитываться относительно родителя и будет в 3 раза меньше чем ширина центральной, то есть нам нужно выставить ширину правой оформительской колонки в 33,3%.

Пятый шаг. Определяемся с шириной контентных колонок

Все три контентных дива вложены в правую оформительскую колонку. Они вложены параллельно. Чтобы было понятнее можно провести аналогию, три матрешки вложены друг в друга и в последней матрешке лежат три кубика. Матрешки это вложенные друг в друга оформительские колонки, а кубики это дивы с контентом.

Ширина правой колонки 20% от ширины страницы. Мы будем рассчитывать все размера контентных дивов относительно этой величины.

Ширина левой контентной колонки - 100% от родителя (20% от страницы)

Ширина центральнойконтентной колонки - 300% от родителя (60% от страницы)

Ширина правой контентной колонки - 100% от родителя (20% от страницы)

Шестой шаг. Двигаем оформительские колонки

Нам нужно сделать так, чтобы каждая из оформительских колонок начиналась там, где заканчивается предыдущая колонка. Сделать это довольно просто. Мы просто присвоим центральной и правой колонкам position:relative и сдвинем их вправо на 100% - left:100%.

Почему именно 100%? Потому что нам надо сдвинуть колонку на всю ширину родительского блока.

Седьмой шаг. Двигаем контентные колонки

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

Для начала выровняем колонки по вертикали с помощью float:left;

Теперь присвоим левому и центральному контентному диву position:relative;, дальше начнем двигать.

Левый контентный див начинается в левом верхнем углу правой колонки. Чтобы он стал отображаться поверх левой оформительской колонки нам надо сдвинуть его на 80% влево от ширины страницы. Так как ширина правой колонки 20% от страницы, то мы будем двигать на четыре ширины правой колонки влево или на 300% от ширины правой колонки - left:-400%;

После того как мы сдвинули левый див с контентом его место в правой колонке занял центральный див. Его мы должны сдвинуть только на 60% относительно ширины страницы или на три ширины правой колонки. Сдвинем центральную колонку на 300% влево.

Теперь левый и центральный контентные дивы находятся на своих местах. В правой оформительской колонке остался только правый контентный див. Его мы никуда двигать не будем. Он сам занял нужное положение, так как ему больше никто не мешает.

Еще немного пояснений

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

Див с классом clear после всех контетных колонок нужен чтобы разорвать поток. После него высота колонок не будет схлапываться.

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

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

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

Колонки одинаковой высоты с помощью позиционирования

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

Описание примера

1. Все блоки макета были заключены в дополнительный блок-обертку id= "wrapper" , которому была задана минимальная высота (CSS ) в 100%, чтобы он растянулся во всю высоту окна браузера, но при необходимости мог тянуться и дальше. Но так как процентная высота считается относительно предка, то пришлось ее указать и для тегов и . Именно относительно этого оберточного блока мы будем позиционировать наши псевдоколонки, поэтому ему было добавлено свойство CSS :relative.
2. В нижней части макета были созданы сами псевдоколонки с id равным "menu_back" , "sidebar_back" и "content_back" , к которым было применено абсолютное позиционирование. Кроме этого у боковых псевдоколонок была указана ширина (CSS ) и координаты смещения (CSS , и ), а у центральной - только координаты смещения, чтобы они заняли такое же положение, что и настоящие колонки. Ну а чтобы псевдоколонки вытянулись во всю высоту блока-обертки, им задали свойство CSS :100%.
3. В результате действий второго пункта наши мнимые колонки хоть и вытянулись, как положено и заняли нужное положение, но при этом расположились поверх основных блоков макета. А все потому, что было использовано абсолютное позиционирование, которое вырывает элементы из основного потока. Чтобы это исправить, им было задано отрицательное значение CSS , которое «положило» их под макет. Все, готово.
4. В принципе от центральной псевдоколонки можно отказаться, просто задав нужный цвет для всей страницы сайта.

Так как в Internet Explorer 6 возникают проблемы с этим способом создания колонок одинаковой высоты, то для него было использовано несколько хаков :

1. IE6 не понимает , но зато работает с так, как будто это и есть минимальная высота. Также в определенной ситуации этот браузер игнорирует правило . Эти две особенности и были использованы, чтобы, с одной стороны, задать блоку-обертке минимальную высоту, а с другой - не помешать другим браузерам.
2. В этом примере IE6 растягивает псевдоколонки только на высоту «первого экрана», зато он понимает expression(document.body.offsetHeight), который динамически высчитывает высоту . Вот она и использовалась, чтобы постоянно подставлять нужное значение в свойство.
3. И все равно IE6 не тянет "content_back" , так как ширина у нее не задана явно. Тут конечно можно указать для нее ширину в 100% и «положить» еще ниже боковых собратьев, задав ей отдельно :-2, но стоит ли оно того?

Колонки одинаковой высоты с помощью фонового изображения

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

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

Описание примера

1. У фиксированного макета имеется блок-обертка, который, собственно, и делает макет фиксированным. Вот у него и устанавливается фоновое изображение (CSS ), которое размножается по вертикали.

Колонки одинаковой высоты с помощью полей и отступов

В этом примере используется довольно необычная техника. Сначала всем колонкам задаются очень большие нижние отступы, из-за которых они растягиваются, а потом такие же по размеру, но отрицательные по значению нижние поля. В конце все, что является «лишним» - просто обрезается.

Описание примера

1. Для увеличения нижних внутренних отступов ко всем колонкам применяется свойство с очень большим значением.
2. Колонкам задается отрицательное нижнее поле (CSS ) равное указанному отступу. Однако в данном конкретном случае размер этого поля на 100px меньше. А все потому, что способ, который использовался в этом примере для прижатия футера, требует наличия нижнего отступа, равного по размеру высоте этого футера. Итого получаем: 30000px-29900px=100px.
3. Результатом действия второго пункта стало уменьшение высоты обертки (id= "wrapper" ) до таких размеров, как будто никакого увеличения колонок не было. То есть для него они стали равны высоте исходя из их содержимого (в нашем случае он прибавляет еще те самые 100px), хотя визуально они и остались в 30000px в высоту. Другими словами, они просто уходят далеко вниз за границу обертки.
4. К оберточному блоку применяется свойство CSS :hidden, чтобы обрезать все, что выходит за его рамки. В итоге имеем красивые колонки одинаковой высоты.

Этот метод кроссбраузерный и его понимают все, включая Internet Explorer 6. А вот совместно со способом, которым прижимался футер, он отказывается корректно работать. Я не стал придумывать очередные «костыли» для этого старичка, а наоборот убрал пару свойств, помогающих ему прижать футер. Поэтому при добавлении в колонки содержимого - в IE6 все тянется, как положено.

Существует несколько методов создания колонок равной высоты. Один из самых популярных и простых заключается в имитации колонок с помощью фонового рисунка. Код HTML при этом остаётся исходным, а в стилях добавляется только свойство background . Естественно, колонки будут иметь разную высоту, которая зависит от их содержимого, но за счёт одного фона создаётся иллюзия одинаковых по высоте колонок.

Легче всего работать с фиксированным макетом, когда заранее известна ширина всех колонок. Например, для макета шириной 900 пикселов готовим картинку размером 900х50 пикселов. Высота рисунка особой роли не играет и начинается от 20-30 пикселов, меньше делать нет смысла, иначе браузеру предстоит дополнительная работа, которая может быть визуально заметна. Пример подобной картинки продемонстрирован на рис. 1. Правая часть показана не полностью, её ширина равна ширине колонки.

Рис. 1. Фоновая картинка для создания колонок

Картинка добавляется к контейнеру, внутри которого располагаются колонки и повторяется по вертикали (пример 1).

Пример 1. Использование картинки

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

Теперь, когда стали понятны теоретические основы данного метода имитации колонок, перечислю его недостатки.

• Сложно быстро поменять цвет колонок, поскольку это делается не через код, а в графическом редакторе.
• Рисунок создаёт дополнительный запрос к серверу и увеличивает время загрузки страницы.
• Метод имеет сложности в макетах с резиновыми колонками, особенно, когда их больше двух.

В целом, минусы не очень существенны и многие разработчики готовы с ними мириться. Но есть решение изящнее - использовать CSS3, в частности, градиенты. Хотя никаких градиентов в нашем примере не видно, они подходят как нельзя лучше из-за того, что позволяют делать не только плавные, но и резкие переходы цветов.

В примере 2 показан тот же самый макет, но фоновая картинка дополняется градиентами для разных браузеров. В остальном, всё остаётся прежним.

Пример 2. Градиенты

Строку с картинкой я оставил для корректного отображения макета в старых браузерах. Современные браузеры её проигнорируют и не будут загружать изображение.

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

red 0, red 200px, green 200px, green 400px, blue 400px, blue 100%

Или в сокращённом виде.

red 200px, green 200px, green 400px, blue 400px, blue

Каждая колонка описывается несколькими параметрами - цвет, начальная координата, конечная координата, отсчёт ведётся от левого края макета. Это позволяет сочетать любые единицы, так, мы можем легко задать ширину отдельных колонок в процентах.

red 0, red 200px, green 200px, green 75%, blue 75%, blue 100%

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