В начало блога На главную

Сначала контент, потом sidebar. На всю ширину и высоту браузера

Итак, шаблон — три колонки. Один сайдбар постоянной ширины для навигации, другой для, скажем,  объявлений Google или фотографий Flickr — центр для основного контента. Это обыкновенное расположение блоков для большинства сайтов и блогов, но с некоторыми отличиями от стандарта кода:

  • Боковые колонки имеют постоянный размер, а центральная растягивается между ними на весь экран
  • Центральная колонка расположена первой в коде
  • Все блоки равной высоты на весь экран
  • Минимум хаков под старые версии

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

LC width — ширина левого блока
RC width — ширина правого блока

1. Создадим фреймы

Для начала пропишем дивы шапки сайта, контейнер для основной начинки и подвал для различной информации:

Для блока контейнера выставляем отступы от краев, чтобы потом в них поместить сайдбары:

На картинке это выглядит следующим образом:

ris1

2. Добавление колонок

Теперь добавим колонки к существующему коду:

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

Отмечу что 100% ширина на центральной колонке относится к контейнеру div, но исключая отступы. Блоки выстраиваются по очереди, но поскольку центр занимает 100% ширины левая и правая колоки располагаются после центра, ниже.

ris2

3. Расстановка боковых колонок по местам

Осталось только расставить колонки таким образом, чтобы они выстроились в линию с отступами контейнера. Колонка центра начинается там, где это должна быть, следовательно мы сосредоточимся на левой колонке. Для установки левой колонки налево мы выставим отрицательный левый margin для левой колонки размером с центральную колонку:

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

ris3

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

ris4

4. Устанавливаем правую колонку на место.

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

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

ris5

5. Немного улучшим дизайн.

Если размер окна браузера не на полный экран то центр сужается до непонятного размера и может быть вообще меньше боковых колонок. Чтобы это предотвратить зададим минимальную ширину блока равную сумме двойной ширины левой колонки и правой колонки. в IE6 эта функция к сожалению не работает…

Но мы используем хак для совместимости с IE6

Отступы внутри sidebar…

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

LC fullwidth — padding — Полная ширина левой колонки без отступа.
LC fullwidth — полная ширина левой колонки.

Отступы центра требует немного большей изобретательности. Отступы центра плюс ширина 100 % заставляет колонку центра расширяться вне своей ширины контейнера. Чтобы вернуть это место назад, нужно увеличить край общей суммой отступов. Это гарантирует, что колонка центра будет такого же размера как нам нужно. Сделаем отступ с каждой стороны по 10px+10px=20px, также по 10px+10px от центрального блока до сайдбаров. Итого 40px. Отступы снизу и сверху ставятся без проблем любого размера.

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

Высоту блоков я выставляю через фикс отступов. Главное чтобы Х не был равен реальной высоте страницы.

Если понадобится какое-то хитрое позиционирование внутри подвала лучше использовать div внутри дива:

Например чтобы подвал растянулся по низу:

Рассказать:
  1. Олег:

    Интересный способ компоновки макета, но вот выравнивание колонок по низу через задание дико большого отступа это просто сокрытие концов колонок за границей общего для них дива, на самом деле они не равны. Это так называемый псевдо-способ, довольно обширно описанный в Интернете. Есть ли более правильный и более надежный способ выравнять три колонки по высоте, при этом заливая их разным цветом и включая или отключая по мере надобности — делая то 2 колонки, то 3, то 1, в зависимости от выбора через менню. (не используя слишком большие отступы)? Если можно продублируйте, пожалуйста, ответ на E-mail.

    1. arozhk:

      Олег, как вариант:

  2. Plata:

    Спасибо, очень познавательною Добавил в закладки.

  3. MeX:

    Очень интересны обе статьи по . Особенно для меня, как чайника, досихпор делающего всё через таблицы…=)

    Спасибо^^