Верстка триколонного макету сторінки за допомогою CSS

У той момент, коли я почав переходити на дивову верстку, а сталося це майже рік тому (як швидко летить час), одним із серйозних уроків, які я повинен був освоїти, був простий і зручнийспосіб верстки триколонкового макета сторінки з використанням

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

Цей макет добре зарекомендував себе, тому я його постійно використовую на практиці.

Особливості даного макета:

  • Текуча (гумова) верстка — розтяжка відбувається за рахунок контентної частини, ліва та права колонки фіксовані. Я так вважаю, що цей макет можна змінити під одночасне розтягнення всіх 3-х частин. Але поки що мені цього не доводилося робити.
  • Використовується фактор внутрішньої пошукової оптимізації - блок з контентом розташований у коді до початку лівої та правої колонки. Цей один із моїх улюблених моментів у дивовижній верстці. Контент починається практично на початку розмітки сторінки. За бажання можна і хедер, якщо він досить великий, розмістити нижче за код контенту.

Реалізація в цьому макеті трьох потрібних колонок досягаєтьсяза рахунок використання плаваючих блоків (контент, ліва і права колонки) інегативних відступів для лівої та правої колонок.

Структура HTML-коду

При використанні оригінального коду макета з Layout Gala у нашому "улюбленому" IEспостерігався наступний баг - при швидкому звуженні вікна браузера ліва колонка з'їжджала до центру. Щоб цього позбутися, я помістив блоки контенту та обох колоноку додатковий контейнер з >

CSS-таблиці

Наведу тут тільки ту частину CSS-коду, яка формує 3 колонки в блочному варіанті верстки (інше буде в прикладі). Прошу звернути увагу, що для того, щоб спрацювала CSS-властивість #container для усунення бага в IE, необхідно одночасно задіяти правила мінімальної ширини для основного блоку (width: expression і min-width).

Можна подивитися на готовий приклад макета сторінки в три колонки з використанням блокової верстки (2 фіксовані колонки).