Колоночная верстка

Существует много способов по верстке колоночных макетов. Уже не один нос разбит в течении холиваров, разожженных по поводу использования тех или иных методов. Казалось бы, что все должно быть предельно ясно и понятно, но все-равно возникает много трудностей. Я хочу и свою лепту вложить во всеобщее благое дело, и потому потратил относительно немного времени на эксперименты, которые привели меня к созданию еще одного метода, в котором есть следующие плюсы и минусы:

Плюсы

• Есть прижимающийся к полу футер
• Колонки меню растягиваются по 100% высоте
• Колонок может быть сколько душе угодно
• Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
• Ширина как резиновая, так и фиксированная
• Критический минимум хаков
• Не используется Javascript
• Не используются бекграундовые изображения для создания эффекта колонки
• Никаких таблиц
• Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

Минусы

• Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
• Есть несколько абсолютно-позиционируемых блоков

Сразу хочу сказать, что любая конструктивная критика приветствуется. Если вы где-то когда-то видели что-то похожее — давайте пруф. Я еще с детства любил велосипеды изобретать). Также приветствуются советы по улучшению примера. Доведем вместе до высокого уровня. Будет время — сделаю что-то на подобие генератора верстки, как у ребят из csstemplater.com, чьим инструментом я время от времени пользуюсь и всем всячески рекомендую. Если вам статья показалась многословной — прокрутите вниз — там я выложил несколько ссылок на сделанные по данной методике примеры. Итак, приступим к делу…

Этап 1: Прилипающий к низу окна футер

В нашей работе прилипающий футер — это одна из наиболее распространенных тем. Что же для него надо?

• 100% высота html и body
• Минимум 3 блока — один на контейнер, содержащий все элементы, второй — непосредственно сам футер
• Ну и третий, нужный для расположения в нем контента страницы

Разметка в таком случае будет похожей на:

1. <div class="wrapper">
2.   <div class="container">
3.     Контент
4.   </div>
5. </div>
6.  
7. <div class="footer">
8.   Прижимающийся футер
9. </div>

* This source code was highlighted with Source Code Highlighter.

И, соответственно, CSS для нее:

1. html, body {
2.         min-height: 100% !important;
3.         min-height: auto;
4.         height: 100%;
5.         border: none;
6.       }
7.       
8.       body {
9.         margin: 0;
10.         padding: 0;
11.       }
12.       
13.       .wrapper {
14.         display: block;
15.         position: relative;
16.         min-height: 100%;
17.         height: auto !important;
18.         height: 100%;
19.         width: 100%;
20.         min-width: 800px;
21.         background: yellow;
22.       }
23. .container {
24.         display: block;
25.         height: 1%;
26.         padding: 0 0 50px 0;
27.       }
28. .footer {
29.         margin: -50px 0 0 0;
30.         height: 50px;
31.         background: #BFF08E;
32.         position: relative;
33.       }

* This source code was highlighted with Source Code Highlighter.

Глубоко копать не буду, так как думаю, что тут все предельно ясно. Можно обратить внимание на нижний padding у блока .container и минусовый верхний margin у блока .footer. Минусовым сдвигом мы подмимаем футер так, чтобы он помещался над контейнером. Паддинг у контентного блока влияет на то, чтобы контент не залазил под футер, а отодвигал его.
Также мы растягиваем тело документа, чтобы оно было со 100% высотой. Некоторые свойства — такие как бекграунд указал опционально.

Этап 2: Раздумия над следующими шагами

После этого этапа я обычно в блоке .wrapper создаю шапку страницы.

1. .header {
2.   position: relative;
3.   width: 100%;
4.   height: 50px;
5.   background: cyan;
6. }

* This source code was highlighted with Source Code Highlighter.

И тут подходит время сделать колонки одинаковой высоты. Мною вариантов было перепробовано очень много. Перебрав все мыслимые и немыслимые варианты я пришел к выводу, что чтобы колонки растягивались и занимали 100% от документа — логично использовать вариант, когда в создании колонки учавствуют 2 блока. Первый блок — спозиционирован абсолютно, имеет фиксированную ширину и высоту в 100%, а второй блок — позиционирован относительно и накладывается поверх абсолютно спозиционированного блока.
Значит надо добавить абсолютный бокс — в .wrapper и относительно спозиционированный в наш контейнер
Приведу пример из моей верстки:

1. <div class="wrapper">
2.   <div class="column-l">
3.   </div>
4.   <div class="column-r">
5.   </div>
6.   <div class="column-m">
7.   </div>
8.   <div class="header">
9.     Шапка
10.   </div>
11.   <div class="container">
12.     <div class="column-l">
13.       Первая колонка
14.     </div>
15.     <div class="column-r">
16.       Вторая колонка
17.     </div>
18.     <div class="content">
19.       Контент
20.     </div>
21.     <div class="clear">
22.     </div>
23.   </div>
24. </div>
25. <div class="footer">
26.   Прижимающийся футер
27. </div>

* This source code was highlighted with Source Code Highlighter.

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

Заключение: Примеры в студию!

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

• Левое расположение меню. Все колонки с минимальным контентом
• Левое расположение меню. Первая колонка растягивает документ по высоте
• Левое расположение меню. Вторая колонка растягивает документ по высоте
• Левое расположение меню. Контентная колонка растягивает документ по высоте
• Правое расположение меню. Все колонки с минимальным контентом
• Правое расположение меню. 3 колонки справа

В общем, комбинаций может быть столько, сколько вам угодно. Напомню или скажу тем кто не знает, что z-index срабатывает как для блоков, позиционируемых абсолютно, так и для position:relative;

Все указанные примеры вы можете скачать одним архивом (11 кб)

Надеюсь, я помог кому-то). Извините за некоторую сумбурность.
Спасибо за внимание.