Div колонки 4 способа растянуть div колонки по высоте


Содержание

4 метода выравнивания колонок в шаблоне

Одним из сложных моментов при использовании CSS является установка одинаковой высоты для колонок. Существуют различные методы, каждый из которых имеет свои плюсы и минусы. В данном уроке мы рассмотрим четыре из их.

Что мы подразумеваем под колонками равной высоты?

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

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

Фальшивые колонки

Это достаточно старый трюк, который широко используется для создания колонок одинаковой высоты.

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

Такое изображение, как правило, имеет 1 px в высоту и ширину, равную ширине шаблона.

В примере используется следующая разметка:

В качестве контейнера можно использовать тег body . В примере используется отдельный элемент div для демонстрации возможности применения метода к части содержания страницы.

Код CSS весьма прост. Смещаем плавающие блоки #sidebar и #content влево и устанавливаем соответствующую ширину для них. Устанавливаем отступы для контейнера #container.

В качестве фона для контейнера мы используем изображение faux-column.png (именно такое, как описывалось выше). Также для него устанавливается свойство overflow: hidden . Оно нужно для того, чтобы предотвратить сворачивание контейнера.

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

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

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

Плюсы:

  • Просто реализовать..
  • Работает вне зависимости от высоты колонки.

Минусы:

  • Требуется изображение, которое использует дополнительный запрос HTTP.
  • Изменения в шаблоне требуют изменений в изображениях.

Псевдо колонки

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

Разметка используется такая же, как и в предыдущем методе:

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

Мы установили фоновый цвет для элементов #content и #sidebar. Обязательно нужно устанавливать цвет для той колонки, которая предполагается быть самой длинной.

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

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

Плюсы:

  • Легко реализовать.
  • Легко поддерживать.

Минусы:

  • Трудно реализовать для количества колонок более 2.
  • Требуется знание, какая колонка будет длиннее.
  • Не работает в шаблонах, когда на разных страницах одна и та же колонка оказывается то длиннее всех, то короче.

Рамки и отрицательные отступы

Данный метод использует рамки колонок и отрицательные отступы для формирования иллюзии равной высоты колонок.

Разметка HTML ничем не отличается от предыдущих методов:

А вот код CSS более интересен. Контейнер имеет фиксированную ширину и центрируется на странице. А свойства для элементов #sidebar и #content имеют интересные значения:

Все цвета, которые используются в данном методе, устанавливаются в свойствах элемента #content. Для него устанавливается фоновый цвет и задается ширина рамки равной ширине боковой панели. Цвет рамки используется тот, который предполагается для фона боковой панели.

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

Первым шагом задаем для правого отступа боковой панели отрицательное значение равное её ширине. Так она задвигается обратно на экран. Проблема теперь в порядке наложения элементов друг на друга. Элемент #sidebar располагается сверху. Чтобы вернуть боковую панель наверх, устанавливаем для нее свойство position: relative .

Плюсы:

  • Работает вне зависимости от того, какая колонка длиннее.
  • Просто установить.
  • Легко поддерживать.

Минусы:

  • Боковая панель должна иметь фиксированное значение ширины, так как свойство border-width воспринимает только абсолютные величины.
  • Отрицательные значения отступов могут не восприниматься в старых версиях IE.

Смещение колонок и контейнеров

Данный метод более сложен для понимания, чем остальные.


В разметке добавляется дополнительный элемент div.

Код CSS для данного метода более сложный, чем для выше описанных способов выравнивания. Для обоих элементов #sidebar и #content задаются свойства смещения влево и ширина, а также кое-что дополнительно.

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

Сначала делаем плавающими колонки и контейнеры. В примере все смещается влево, но направление смещения большой роли не играет.

Затем устанавливаем фон для двух контейнеров div . Внутренний контейнер имеет фон боковой панели, в внешний — фон основного содержания.

Илон Маск рекомендует:  Asp семейство application staticobjects

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

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

Для позиционирования внутреннего контейнера устанавливаем для его свойства right значение 75%, что равно ширине колонки основного содержания.

Теперь фоны располагаются на своих местах. Однако содержание обеих колонок сдвинуто на 75% влево. Нужно вернуть его обратно на место.

Устанавливаем относительное позиционирование и значение свойства left равным 75%, чтобы сдвинуть все вправо.

Плюсы:

  • Метод работает вне зависимости от ширины колонок
  • Метод работает в любых шаблонах.
  • Можно формировать сколько угодно колонок.

Минусы:

  • Метод достаточно сложен для понимания.
  • Требуется дополнительный элемент div .

Заключение

За рамками обзора остались методы с использованием JavaScript. В данном уроке описаны только 4 метода выравнивания колонок с помощью CSS. Если вы знаете другие способы, опишите их в комментариях. Читатели будут благодарны вам.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.vanseodesign.com/css/equal-height-columns/
Перевел: Сергей Фастунов
Урок создан: 3 Августа 2011
Просмотров: 35538
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Как растянуть div на 100% по вертикали (CSS)

Задача

Растянуть div по вертикали на 100% относительно родительского блока или экрана. Резиновая высота div.

Решение

Ваш div займет 100% по вертикали только в том случае, если высота родительского блока задана 100%. Так что последовательно прописываем высоту 100% у всех блоков по иерархии, включая body и html.

Пока мы не проставим высоту 100% всем блокам, в который вложен целевой div, ничего не выйдет. Как только пропишем, все встанет как надо.

Резиновый по вертикали сайт

Таким же образом мы можем задать высоту внутреннего div не 100%, а меньше, тем самым обеспечив сохранение пропорций верстки на разных экранах по вертикали.

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

Задача

Сделать колонки одинаковой высоты, используя блочную верстку.

Высота колонок зависит от содержания Колонки одинаковой высоты

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

Решения

Решение 1 — использование фоновой картинки

  • кроссбраузерность
  • валидный код
  • минимум дополнительных блоков
  • подвал прижимается к низу без проблем (при использовании приема из «Прижимаем подвал к низу»)
  • дополнительный файл-картинка для фона
  • подходит только для блоков фиксированной ширины

Автор метода Dan Cederholm. Первоисточник. Применим только для колонок фиксированной ширины.

Метод основан на том, что блок родитель будет иметь высоту равную высоте более высокой колонки (при условии, что колонки не используют абсолютное позиционирование).

Высота блока-родителя равна высоте самой высокой колонки

Создаем изображение для фона блока-родителя:
Для наглядности толщина линии взята больше, чем требуется.В «боевых» условиях достаточно линии высотой в 1px.

Фон родителя сделает визуально колонки одинаковой высоты

Решение 2 — margin + padding + overflow

  • подходит для резиновой верстки
  • не требуется дополнительная картинка
  • валидный код
  • минимум дополнительных блоков
  • не работает в Opera 8, из-за неверной трактовки overflow: hidden;


Суть метода — создать колонки очень большой высоты, «лишнее» обрезать блоком-родителем с помошью overflow:hidden.

Родитель усекает лишнее по высоте самой высокой колонки

Метод 3 — использование обертывающих блоков

  • полная кроссбраузерность
  • применим к резиновой верстке
  • не используются картинки
  • валидный код
  • добавляются блоки по числу колонок
  • пока не ясно как прижать подвал при каркасе на этом методе

Автор метода — Matthew Taylor. Полный перевод — тут. Суть метода — сделать блоков-оберток по числу колонок.

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

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

Посмотреть примерСкачать

Речь в данной статьей пойдет о свойстве flex . О нём я уже писал в данной статье — Вторая часть секретных свойств CSS3.

Разметка страницы

HTML часть

Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:

То есть нам необходимо сделать так, чтобы блок

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

CSS часть

Определим flexbox для основного контейнера, в котором находятся два блока:

Сейчас мы преобразовали блок с идентификатором page во flex-контейнер. На данный момент он занимает всю ширину страницы.

Но давайте сделаем для него максимальную ширину 1200px и выровняем по центру:

Отлично! Сейчас осталось задать ширину для центрального блока с основным контентом и для сайдбара:

  • flex-grow — на сколько один отдельный блок может быть больше соседних элементов.
  • flex-shrink — определяет возможность сжиматься при необходимости.

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

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

Также нужно сказать о том, где работает данный метод. Так как это свойство достаточно новое, то и работает оно в современных браузерах Firefox, Chrome, Safari, Opera и IE 11.

Вывод

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

Но самое основное, и, главное, часто используемое решение при верстке страниц, мы рассмотрели в данной статье.

Успехов!

Еще материалы по этой теме

Отправить статью

Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

7 комментариев к записи

�� Потрясающее решение двух колонок одинаковой высоты! Альтернативы нет!
Другие решения — либо «обманки», вроде border шириной в aside. Более-менее неплохое решение — придание глобальному контейнеру свойства таблицы (display: table;), а aside и main — свойств ячейки (display: table-cell;). Но и это решение — не то, не очень… А здесь — просто восторг!
Решение простое, изящное, легко подстраивается под себя. Мало того, включает и вариант для мобилок.
Хотя не вполне понятно самое последнее правило:

Илон Маск рекомендует:  Модель объектов javascript объекты navigator'а

@media all and (max-width: 700px) <
.
#main < padding-right:40px; >
>

— здесь не видно этого зазора в 40px.

Спасибо большое, беру на вооружение.

А вот интересно, насколько будет правильно прикрутить заголовок и подвал вне контейнера page? Например, сделать глобальный контейнер

#global <
margin: 0 auto;
max-width: 1300px; >

а в него хэдер, затем section >

Благодарю, добрый человек — пригодилось!

Замечательное решение, спасибо автору! Иначе пришлось бы городить отдельный макет для мобилок.

Но у него есть пара проблемочек — решить их можно, но придётся попыхтеть.

1. Когда aside и page выстраиваются лентой, и если в aside много чего наложено, например, меню на много пунктов, на смартфоне меню приходится долго-долго мотать чтоб добраться до статьи. Эффект «тускнеет».

ИМХО, для избавления от этой перемотки, есть 2 решения:

а) В меню давать ссылки не просто на статьи, а ссылки на якорь в начале статьи. Например,

И тогда при нажатии кнопки меню юзер перескочит сразу в начало статьи, а не страницы. А меню останется сверху.

б) Попробовать меню аккордеон — меню будет спрятано в кнопку рубрики — клик и рубрика раскрыла меню рубрики. Такой вариант вполне пригоден для смартофонов. А для десктопов сжимать «гармонь» как-то ну очень необязательно. Есть ли тут универсальное решение, не знаю.

2. Вторая проблема — оказалось, не так просто подобрать ширину, при которой aside и page выстраиваются лентой:

Под мой Note4 я указал 600рх и при портретном смартфоне — всё лентой и хорошо. А вот при ландшафте >600рх есть неприятный эффект: aside с аккордеоном становятся как заказано — 280px, а поле для статьи — маловато. И получается рядом с меню пустое место. Как победить это, ума не приложу!

Хотя, сейчас поэкспериментировал: оказывается, в разных мобильных браузерах всё это по-разному! ёклмн!

Как растянуть Div на всю высоту экрана?

Рекомендованные сообщения

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Войти

Уже зарегистрированы? Войдите здесь.

Статистика пользователей

Сейчас на странице 0 пользователей

Нет пользователей, просматривающих эту страницу.


Спрашивают сейчас

Автор: decode
Создана Суббота в 16:49

Автор: npofopr
Создана 18 октября

Автор: digenis
Создана 15 часов назад

Растягивание блока на пустое пространство родительского элемента (div expand)

Сегодня столкнулся с неприятной проблемой — при блочной верстке понадобилось растянуть блок на пустое пространство родительского элемента по вертикали (div expand). Естественно, по горизонтали никакой трудности нету — просто задать отображение блочным (display: block) и будет счастье =).

Но тут другое. Есть родительский div, в нем три div’а (три колонки — средняя — контент, справа и слева — панели). Получается, что колонка с контентом может быть неограниченного размера, и надо подстроить размер боковых div’ов под нее (для чего? например, чтобы банально изменить цвет). Думал, height: 100% и счастье. Оказалось, все немного сложнее — при таком процентном указании высоты размер дива будет просто видимый размер окна со всеми вытекающими последствиями.

У необходимого свойства (которое позволяет решить поставленную задачу) нет единой поддержкой разными браузерами. Поэтому надо прописывать отдельно для каждого. Идея простая: для родительского div’а надо задать display, который разрешит растягивание внутренних элементов (-moz-box, -webkit-box, -ms-flexbox — в зависимости от браузера), а внутри блока, который надо растянуть задать значения -moz-flex-box, -webkit-flex-box, ms-flex, и т.д. (тоже в зависимости от браузера).

Свободное пространство родителя делится на сумму значений -moz-flex-box, -webkit-flex-box или ms-flex всех непосредственных потомков и распределяется между ними пропорционально их значениям.

Наша задача упрощена тем, что вертикально div’ов по одному.

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

Дата публикации: 2014-05-09

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

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

Как сделать обе колонки одного размера

Эта проблема решается несколькими способами: можно применить метод на основе одного лишь CSS, либо сделать это при помощи Javascript’а. В данном учебнике колонки одинакового размера будут созданы с помощью трех методов CSS и одного метода jQuery. В демо примере видно, как колонки одного размера создаются разными техниками.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Относительно расположенный упаковщик

Методом относительно расположенного упаковщика колонки располагаются внутри DIV’а-упаковщика, а затем можно применить к этому DIV’у-упаковщику position: relative. Затем добавить к колонкам position: absolute, установив top: 0, что поместит колонки поверх упаковщика, и установить bottom: 0, отчего они обе окажутся во всю высоту div’а-упаковщика.

CSS 100% высота

Я всегда сталкиваюсь с затруднениями, когда необходимо растянуть блок на 100% высоты страницы. Например, у меня есть блок div , который необходимо растянуть, однако все немного сложнее, чем кажется. Итак, почему бы не найти кроссбраузерное решение по растягиванию блока на всю высоту страницы? Сегодня мы попытаемся найти это решение.

Скажем, у вас есть html-файл наподобие такого:

К нему прилагается CSS:

Что это нам дает, вы можете увидеть перейдя по:

Как вы можете видеть, высота страницы определяется контентом и не растягивается на 100%, несмотря на то, что мы добавили блоку #content свойство height со значением 100% . Как так? Давайте немного поразмышляем об HTML. HTML – это всего лишь куча контейнеров вложенных один в другой. Итак, у нашей страницы сперва идет контейнер html , затем внутри контейнера html лежит контейнер body , ну и, наконец, в body расположен блок с идентификатором content . Когда мы помещаем контент в один из этих блоков, он растягивает этот блок и все другие блоки, содержащие этот блок. Итак, мы растягиваем блок

Чтобы исправить это, нам нужно назначить тегу body свою высоту. Но мы снова столкнемся с той же проблемой, ведь тег body лежит в теге html . Таким образом, чтобы растянуть блок

И на этом все. Посмотрите demo. Блок с контентом растягивается на всю высоту окна браузера.

Обратите внимание на объявление min-height:100%; : благодаря нему в случае, если контент выходит за пределы окна браузера, фон также будет растягиваться за контентом.

Не забываем и о старых браузерах IE, которые не понимают свойство min-heigt , для них необходимо добавить * html #content .

Колонки (div и др.блоки) одинаковой высоты | CSS

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

Будем верстать на HTML5 под резиновый сайт, поэтому вместо div я использовала main, article и as >

Как сделать в таблице отступы только между ячейками

Жаль, border-spacing (там пример) устанавливает отступ не только между ячейками, но и от краёв таблицы до ячеек. Поэтому для того, чтобы увеличить расстояние между колонками, приходится подвинуть дочерние элементы с помощью transform: translate.

Илон Маск рекомендует:  Экономия переменных

Три колонки равной высоты, но разной ширины

Стиль CSS будет тот же. А HTML можно варьировать. Можно задать каждой колонке свою ширину и отступ как в процентах, так и в пикселях.

Хм, сейчас запутаю вас окончательно, нужно было просто взять div. HTML выше подходит для: Но не для Так выглядит Главная страница или страница тегов. Тут вместо article нужно использовать section, у которого будет несколько потомков article. То есть статья — это article. Несколько статей объединяются в section.

12 комментариев:

Igor Zeleny Спасибо. NMitra Пожалуйста! Igor Zeleny Проверил в Opera не работает, не понимает transform: translateX даже с префиксом -o- NMitra А с -webkit- ? Сейчас Опера перешла на движок Хрома. После этого я Оперу снесла. Здесь примеры поддерживаются http://shpargalkablog.ru/2011/09/transform-css.html ? Igor Zeleny Переустановил Оперу, все ОК. Это у меня какая то старая версия была.
Еще раз спасибо :) Анонимный Hi there very colol website!! Man .. Beautiful ..
Amazing .. I will bookmark your web site and take the feeds also?
I am satisfied to search out a lot of helpful info right here within the publish, we’d like develop more strategies inn this regard, thanks foor sharing.
. . . . . NMitra Не поняла, что значит «we’d like develop more strategies inn this regard, thanks foor sharing». Юрий Наташа, спасибо огромное за инфу. Уже давно искал способ реализации такой функции. К сожалению, не понял двух моментов.

Зачем во втором примере («Как сделать в таблице отступы только между ячейками»):

1) для main прописано border-spacing (вы задаете расстояние между границами ячеек)?

2) использованы псевдо-селекторы :first-child и :last-child?

Div колонки: 4 способа растянуть div колонки по высоте

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

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

Техника, которая описана в этой статье, позволит вам создавать вёрстку без каких-либо компромиссов для вашего кода и гибкости. Эта техника:

  1. позволяет создать контент с плавающей шириной, боковые панели — с фиксированной;
  2. позволяет центральной колонке подгружаться первой;
  3. выравнивает все колонки по высоте;
  4. требует всего лишь один лишний div в разметке;
  5. использует очень простой CSS, с минимумом хаков.

Итак, приступим!

Требуемая HTML-разметка проста и элегантна.

И это всё. Один единственный дополнительный div содержит все необходимые вам колонки.

В файле стилей тоже ничего сложного. Для начала, давайте договоримся, что левая колонка у нас будет шириной в 200px, а правая — 150px. Для упрощения комментариев используются аббревиатуры для ширин колонок: LC (левая), RC (правая) и СС (центральная).

Вам осталось переписать необходимые для вашего шаблона значения ширин. Этот способ работает во всех современных браузерах: Safari, Opera, FireFox и с IE6 и выше.

Как это работает?

Стратегия проста: у div-контейнера изменяющаяся ширина и фиксированные внутренние отступы (padding). Трюк в том, что необходимо переместить левую и правую колонки на отступов контейнера.

Давайте рассмотрим пример по шагам.

Шаг первый: создаём основу.

Начнём с шапки, контейнера для контента и футера.

Задаём отступы справа и слева для наших колонок

Сейчас шаблон выглядит так:

Шаг второй: добавляем колонки

Добавляем в элемент-контейнер колонки в том порядке, в котором они должны будут появляться на странице.

Затем устанавливаем необходимые ширины и float-ы для сайд-баров, чтобы выстроить их в одну линию. Кроме того, футеру необходимо установить свойство clear.

Обратите внимание, что ширина 100% для центральной колонки — это ширина элемента-контейнера, исключая внутренние отступы.

Поскольку центральной колонке установлена такая ширина, левая и правая колонки перенеслись ниже.

Шаг третий: позиционируем левую колонку

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

Для этого необходимо выполнить два шага. Во-первых, мы установим внешний отступ равным минус 100% ширины. Помните, что 100% относится к ширине центрального контейнера, который в точности равен ширине центральной колонки.

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

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

Свойство right смещает правую границу колонки влево на 200px. Теперь левая колонка выровнена в левом внутреннем отступе (padding) объекта-контейнера.

Шаг четвёртый: позиционируем правую колонку

Единственная оставшаяся задача — это разместить правую колонку. Чтобы это сделать, нам необходимо «вытянуть» колонку в правый внутренний отступ. Мы снова будем использовать отрицательный margin.

Всё, колонка находится справа, объекта-контейнера теперь не видно.

Шаг пятый: меры предосторожности

Если размер окна браузера уменьшить так, чтобы ширина центральной колонки стала уже чем ширина левой, то вёрстка «поедет». Чтобы предотвратить это, установим свойство min-width для body документа.

В IE6, отрицательный margin слишком растягивает левую колонку (на всю ширину браузера). Чтобы исправить это, мы напишем следующий стиль, который будет восприниматься только IE6.

Не забываем про padding-и

Приведённая техника вёрстки позволяет использовать внутренние отступы для сайд-баров без всяких ухищрений. Например, мы хотим добавить отступ равный 10px справа и слева для левой колонки. Для этого необходимо написать следующее:

Для установки padding-ов центральной колонки надо проявить изобретательность. Нам не потребуется дополнительной разметки, только дополнительный CSS.

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

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

Вернёмся к нашему примеру. Боковым колонкам установим padding равный 10px с каждой стороны, а для центральной — 20px. Таким образом, сумма отступов для сайд-баров равна по 20px, а для контента — 40px.

Верхние и нижние padding-и добавляются без проблем.

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

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

В этом примере устанавливается нижний отступ равный 10px.

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

Однако, если вам действительно необходимо это исправить, то для этого потребуется ещё один div, обёртка для нашего футера.

А теперь для этой обёртки применим тот же трюк, что и для колонок, чтобы выровнять их по высоте. Обратите внимание, что эти стили будут использоваться только в IE6.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL