CSS: верстка «резинового» макета из трех колонок

2008-02-11 / Рубрика: CSS

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

Итак, зададим HTML-разметку: 

<div id="header">
... шапка страницы ...
</div>
<div id="sidebar">
... колонка меню ...
</div>
<div id="content">
... основное содержимое страницы ...
</div>
<div id="otherbar">
... колонка меню ...
</div>
<div id="footer">
... подвал ...
</div>
и отформатируем ее с помощью следующей таблицы стилей: 
#content {
  float:left;
  width:50%;
  background-color:#CCC;
}
#sidebar {
  float:left;
  width:30%;
  background-color:#FFC;
}
#otherbar {
  float:left;
  width:20%;
  background-color:#FFC;
}
#header {
  background-color:#FCF;
  text-align:center;
}
#footer {
  clear:both;
  text-align:center;
  background-color:#CFF;
}

В этом решении все три колонки включены в плавающую модель, выравниваются по левому краю и суммарная их ширина не превышает 100%.

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

Вот так легко и просто. Этот метод работает во всех популярных браузерах.

Автор — Gennady

Дата написания — 2008-01-15

Источник: www.linkexchanger.su

К этой статье я

Опубликовано Павел В. (не зарегистрирован) в ср., 03/12/2008 - 01:04.

К этой статье я добавил бы следующее.

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

... колонка меню ...

А они не будут в

Опубликовано admin в вт., 03/18/2008 - 12:53.

А они не будут в этом случае накладываться друг-на друга?

При уменьшении

Опубликовано mihdan (не зарегистрирован) в пт., 04/11/2008 - 12:36.

При уменьшении размеров браузера - верстка посыпется! Нужно использовать min-width (комбинируя способы для ИЕ и нормальных браузеров)

Не

Опубликовано Alexit (не зарегистрирован) в пт., 06/13/2008 - 06:13.

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

В IE-6 при

Опубликовано Гость Lavr (не зарегистрирован) в пт., 08/01/2008 - 15:07.

В IE-6 при уменьшении окна браузера , правая колонка расспологается под левой колонкой,ну или наоборот левая
наскакивает на правую.
Есть какой нибудь способ обуздать IE-6 !?

Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Сохранить установки".