Кроссбраузерный макет в 3 колонки

В последнее время всё большую популярность приобретает блочная верстка сайтов или, как ее еще называют, верстка div´ами. Суть этой технологии заключается в том, что каркас (шаблон) страницы формируется из блочных элементов — «DIV». Для каждого из этих блоков устанавливается стиль, который позиционирует его странице в определенном положении. Таким образом, формируется каркас, который, впоследствии, наполняют содержимым.

В этой статье я попытаюсь доходчиво объяснить, как сверстать макет страницы, состоящей из области для заголовка, трех, равных по высоте колонок, и нижней области — footer´а. А также по какому принципу он строится, и как добиться одинакового вида страницы разных браузерах.

Требования к шаблону

Итак, что же мы хотим получить:

Макет должен состоять из header´а, footer´а, и трех колонок: левая - для навигации, средняя - для контента, и правая - для всего остального.
Контент должен располагаться как можно выше в разметке страницы.
Растягивающийся, так называемый «резиновый» макет. Растяжка должна происходить за счет колонки с контентом.
Кроссбраузерность.
Использовать минимальное количество скриптов, тегов, и структурных хаков.

Логика макета

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

Сначала создаем внешний блок, в котором мы будем позиционировать другие блоки. Устанавливаем ему фоновое изображение, по ширине равное ширине первой колонки и задаем повторение по оси Y, а также привязку к левой стороне. Внутри первого блока создаем второй, аналогично устанавливаем фон для правой колонки. Далее идет блок заголовка. После этого создадим контейнер для содержания левой и центральной колонок. Нужно сделать его плавающим и, т.к. средства CSS не позволяют динамически вычислять размер блоков, сместить влево, из области видимости, на величину, равную ширине правого блока, и установить его ширину равной 100%. Внутри контейнера создадим два блока. Для того чтобы блоки располагались рядом, сделаем первый из них плавающим, а также сместим его в область видимости. Т.к. первый блок в контейнере мы сделали плавающим, при размещении второго блока браузер его не будет учитывать. Поэтому, чтобы мы увидели второй блок в нужном нам месте, нужно сместить этот блок вправо, вывести его в область видимости, а также, сместить его на величину, равную ширине левого блока. После блока-контейнера поместим блок сайдбара. Благодаря тому, что блок-контейнер плавающий, и смещен величину, равную ширине сайдбара, сайдбар поднимется вверх и займет позицию рядом с контейнером. Теперь создадим на footer и над ним поместим блок-очиститель, чтобы footer никуда не смещался.

Кроссбраузерность

В большинстве браузеров этот макет отображается правильно, но в Internet Explorer, мы получим совсем не то, что хотели.

Во-первых, IE6 не поддерживает свойство min-width, поэтому напишем для него соответствующее выражение.
Т.к. мы отодвигаем плавающий элемент с float:left от левой границы, в IE его величина будет удвоена. [The IE Doubled Float-Margin Bug]
Для этого и множества других багов в IE, есть достаточно простое решение: т.к. все плавающие элементы автоматически становятся блочными элементами, в стандарте сказано, что любые значения свойства display кроме none для них игнорируются, тем не менее, если установить для плавающих блоков display:inline, большинство багов IE пропадают, а блоки не становятся inline.
В IE6 иногда может наблюдаться исчезновение контента сайдбара, чтобы это исправить для элементов сайдбара нужно установить свойство: position:relative

Разметка

<head> <link rel="stylesheet" type="text/css" media="screen" href="../css/elastic_3c_new.css" /> <script language="javascript" type="text/javascript"> //<![CDATA[ // Для старых версий и NN4 т.п. if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" media="screen" href="css/elastic_3c_old.css">'); //]]> </script> </head> <body> <div id="outer_wrapper"> <div id="wrapper"> <div id="header">  <h1>Заголовок</h1> </div> <div id="container"> <div id="navbar">  <h2>Навигация</h2> </div> <div id="main">  <p> Контент...</p> </div> <div class="lastik"></div> </div> <div id="sidebar">  <h2>Cайдбар</h2> </div> <div class="lastik"></div> <div id="footer">  <h2>Footer</h2> </div> </div> </div> </body> </html>

Описание стилей

Основной стиль #outer_wrapper { width:100%; /* Для решения бага прорисовки фона в IE */ min-width:400px; /* Минимальная ширина макета */ _width: expression(document.body.clientWidth < 400 ? "400px": "100%"); /* для IE6 */ margin:0 auto; /* Техника ложных колонок (faux-column), левая колонка */ background:#00ff00 url('../left.gif') repeat-y left; } #wrapper { /* Техника ложных колонок (faux-column), правая колонка */ background:url('../right.gif') repeat-y right } #header { border:1px solid #0000ff; background:#9999ff; /* Задаем свойства для элемента и устраняем Peekaboo баг в IE (v6 sp2) */ width:100%; margin:0 -1px; /* Т.к. предыдущее правило создает горизонтальную прокрутку в IE, избавимся от нее */ } #container { float:left; width:100%; display:inline; /* Убираем удвоенние внешних отступов (margins) у плавающих элементов в IE */ margin-left:-200px; /* Смещаем контейнер влево на величину, равную ширине сайдбара */ } #navbar { float:left; width:150px; /* ширина раздела навигации */ display:inline; /* Убираем удвоенние внешних отступов (margins) у плавающих элементов в IE */ margin-left:200px; /* смещаем вправо на ширину сайдбара (в область видимости)*/ } #main { margin-left:350px; /* ширина раздела навигации (150px) + ширина сайдбара (200px) */ } /* Если высота сайдбара больше высоты колонки #main */ #sidebar { /* Для сохранения контента блока #sidebar справа от блока #main */ padding-left:100%; /* Возвращаем блок #sidebar на место, который был вытеснен из области видимости из-за отступа */ margin-left:-200px } #sidebar h2 { position:relative; /* Чтобы IE (v6 sp2) отображал элемент (баг Peekaboo, см. #header) */ } #footer { width:100%; /* Для решения бага прорисовки фона в IE */ /* Для очистки #container */ clear:both; border:1px solid #666666; background:#cccccc; } /* используется для "очистки" блоков */ .lastik {height:0;clear:both}
Если нужна поддержка NN4 #outer_wrapper { /* Техника ложных колонок (faux-column), левая колонка */ background-image:url('./../outer_wrapper.gif'); background-repeat:repeat-y; border:1px solid #dddddd; } #header,#footer { /* Заставим блоки расшириться до 100% ширины */ width:150%; /* Данный трюк позволит закрасить блок целиком, а не только область под контентом */ background:#00ff00 url('./../clear.gif') } #container { /* Удостоверимся что NN4 не отрисует фон в этом элементе */ background-image:none; float:left; width:auto; /* Внешняя и внутрянняя полоски нужны чтобы оставить место для блока #sidebar */ margin-right:160px; padding-right:160px } #navbar { float:left; width:140px } #main { /* В NN4, очень важно корректно определить background для позиционированных * * элементов. Если NN4 не найдет картинку, то разметка разрушится */ background-image:url('./../clear.gif'); /* это правило сохранит оболочку внутри вьюпорта */ margin:0 } #sidebar { /* Определяем фоновый цвет для блока #sidebar */ background:#ffff00 none; margin:0; padding:10px 0; float:right; /* для NN4 */ width:180px } /* Этот класс используется для структурных хаков в разметке */ .lastik {clear:both}

Вы можете загрузить исходный код кроссбраузерного шаблона с 3 колонками