1. Отже, приступимо!
2. Як це працює?
3. Крок перший: створюємо основу.
4. Крок другий: додаємо колонки
5. Крок третій: позиціонуємо ліву колонку
6. Крок четвертий: позиціонуємо праву колонку
7. Крок п'ятий: запобіжні заходи
8. Не забуваємо про padding-і
9. Колонки однакової висоти

Три колонки. Одна - це сайд-бар фіксованої ширини, для вашої навігації. Інша, скажімо, для реклами або фотографій. І, нарешті, контент зі змінною шириною для корисної інформації.

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

Техніка, яка описана в цій статті, дозволить вам створювати верстку без будь-яких компромісів для вашого коду і гнучкості. Ця техніка:

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

Отже, приступимо!

Необхідна HTML-розмітка проста і елегантна.

<Div id = "header"> </ div> <div id = "container"> <div id = "center-div" class = "column"> </ div> <div id = "left-div" class = "column"> </ div> <div id = "right-div" class = "column"> </ div> </ div> <div id = "footer"> </ div>

І це все. Один єдиний додатковий div містить всі необхідні вам колонки.

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

body {min-width: 550px; / * 2 x LC + RC * /} #container {padding-left: 200px; / * LC * / padding-right: 150px; / * RC * /} #container .column {position: relative; float: left; } # Center-div {width: 100%; } # Left-div {width: 200px; / * LC * / right: 200px; / * LC * / margin-left: -100%; } # Right-div {width: 150px; / * RC * / margin-right: -150px; / * RC * /} #footer {clear: both; } / *** IE6 Fix *** / * html # left-div {left: 150px; / * RC * /}

Вам залишилося переписати необхідні для вашого шаблону значення ширини. Цей спосіб працює у всіх сучасних браузерах: Safari, Opera, FireFox і з IE6 і вище.

Як це працює?

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

Давайте розглянемо приклад по кроках.

Крок перший: створюємо основу.

Почнемо з шапки, контейнера для контенту і футера.

<Div id = "header"> </ div> <div id = "container"> </ div> <div id = "footer"> </ div>

Задаємо відступи справа і зліва для наших колонок

#container {padding-left: 200px; / * LC * / padding-right: 150px; / * RC * /}

Зараз шаблон виглядає так:

Крок другий: додаємо колонки

Додаємо в елемент-контейнер колонки в тому порядку, в якому вони повинні будуть з'являтися на сторінці.

<Div id = "header"> </ div> <div id = "container"> <div id = "center-div" class = "column"> </ div> <div id = "left-div" class = "column"> </ div> <div id = "right-div" class = "column"> </ div> </ div> <div id = "footer"> </ div>

Потім встановлюємо необхідні ширини і float-и для сайд-барів, щоб вибудувати їх в одну лінію. Крім того, футер необхідно встановити властивість clear.

#container .column {float: left; } # Center-div {width: 100%; } # Left-div {width: 200px; / * LC * /} # right-div {width: 150px; / * RC * /} #footer {clear: both; }

Зверніть увагу, що ширина 100% для центральної колонки - це ширина елемента-контейнера, виключаючи внутрішні відступи.

Оскільки центральній колонці встановлена ​​така ширина, ліва і права колонки перенеслися нижче.

Крок третій: позиціонуємо ліву колонку

Необхідно вирівняти ліву колонку в контейнері. Центральна колонка починається саме там, де це необхідно, тому зосередимося на лівому стовпчику.

Для цього необхідно виконати два кроки. По-перше, ми встановимо зовнішній відступ рівним мінус 100% ширини. Пам'ятайте, що 100% належить до ширини центрального контейнера, який в точності дорівнює ширині центральної колонки.

# Left-div {width: 200px; / * LC * / margin-left: -100%; }

Тепер лівий стовпець перекриває центральну колонку і знаходиться у лівій кордону. Права колонка притиснута до лівого краю. Отримуємо наступну розмітку:

Щоб виконати останній крок для лівої колонки, будемо використовувати відносне позиціонування зі зміщенням рівним її ширині.

#container .columns {float: left; position: relative; } # Left-div {width: 200px; / * LC * / margin-left: -100%; right: 200px; / * LC * /}

Властивість right зміщує праву межу колонки вліво на 200px. Тепер ліва колонка вирівняна в лівій внутрішній відступі (padding) об'єкта-контейнера.

Крок четвертий: позиціонуємо праву колонку

Єдина залишилася завдання - це розмістити праву колонку. Щоб це зробити, нам необхідно "витягнути" колонку в правий внутрішній відступ. Ми знову будемо використовувати негативний margin.

# Right-div {width: 150px; / * RC * / margin-right: -150px; / * RC * /}

Все, колонка знаходиться праворуч, об'єкта-контейнера тепер не видно.

Крок п'ятий: запобіжні заходи

Якщо розмір вікна браузера зменшити так, щоб ширина центральної колонки стала вже ніж ширина лівої, то верстка "поїде". Щоб запобігти цьому, встановимо властивість min-width для body документа.

body {min-width: 550px / * 2 x LC + RC * /}

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

* Html # left-div {left: 150px; / * RC * /}

Не забуваємо про padding-і

Наведена техніка верстки дозволяє використовувати внутрішні відступи для сайд-барів без всяких хитрувань. Наприклад, ми хочемо додати відступ рівний 10px справа і зліва для лівої колонки. Для цього необхідно написати наступне:

# Left-div {width: 180px; / * LC fullwidth - padding * / padding: 0 10px; right: 200px; / * LC fullwidth * / margin-left: -100%; }

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

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

Однак після цих маніпуляцій, центральна колонка стала ширше і, як наслідок, ліва колонка трохи з'їхала. Збільшимо зсув лівої колонки на загальну величину внутрішніх відступів центральної.

Повернемося до нашого прикладу. Боковим колонкам встановимо padding рівний 10px з кожного боку, а для центральної - 20px. Таким чином, сума відступів для сайд-барів дорівнює по 20px, а для контенту - 40px.

body {min-width: 630px; / * 2x (LC fullwidth + CC padding) + RC fullwidth * /} #container {padding-left: 200px; / * LC fullwidth * / padding-right: 190px; / * RC fullwidth + CC padding * /} #container .column {position: relative; float: left; } #Center {padding: 10px 20px; / * CC padding * / width: 100%; } #Left {width: 180px; / * LC width * / padding: 0 10px; / * LC padding * / right: 240px; / * LC fullwidth + CC padding * / margin-left: -100%; } #Right {width: 130px; / * RC width * / padding: 0 10px; / * RC padding * / margin-right: -190px; / * RC fullwidth + CC padding * /} #footer {clear: both; } / *** IE Fix *** / * html #left {left: 150px; / * RC fullwidth * /}

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

Колонки однакової висоти

Для вирівнюючи висот колонок використовуємо таку техніку:

#container {overflow: hidden; } #Container .column {padding-bottom: 20010px; / * X + padding-bottom * / margin-bottom: -20000px; / * X * /} #footer {position: relative; }

У цьому прикладі встановлюється нижній відступ рівний 10px.

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

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

<Div id = "footer-wrapper"> <div id = "footer"> </ div> </ div>

А тепер для цієї обгортки застосуємо той же трюк, що і для колонок, щоб вирівняти їх по висоті. Зверніть увагу, що ці стилі будуть використовуватися тільки в IE6.

* Html body {overflow: hidden; } * Html # footer-wrapper {float: left; position: relative; width: 100%; padding-bottom: 10010px; margin-bottom: -10000px; background: #fff; / * Same as body background * /} Остаточна версія.