Фиксированные колонки без position:absolute;
Абсолютное позиционирование весьма занимательная штука и создание глобальной разметки web-страницы на его основе это, наверное, самый предпочтительный метод из всех известных.
В нем больше логики, плюс возможность размещать колонки и блоки в любой последовательности по html-коду, а визуально все будет так, как вы захотите.
Единственным недостатком, практически сводящим на нет все преимущества данного приема это проблема сто процентной высоты web-страницы, но иногда то, что является минусом, можно трансформировать в плюс.
Ниже будут описаны еще два приема, которые позволяют, используя парочку простейших стилевых правил создать столь любимую автором ресурса - разметку с фиксированными колонками.
Тем, кого отпугивает отсутствие вертикальной прокрутки и невозможность прокручивать страницу по вертикали при нахождении курсора мыши за пределами разметки или над фиксированной колонкой читать дальнейшее не рекомендуется, не тратьте свое драгоценное время напрасно.
О стилях, которые помогут нам решить поставленную задачу. Вот они:
height:100%; overflow-y/x:hidden/auto;
Сочетание указанных стилевых правил в различных комбинациях, где хитрость лежит на поверхности, даст столь необходимый нам результат.
Разметка по html-коду и стилям во многом идентична.
html
<body>
<div id="center">...</div>
<div id="fixed">...</div>
</body>
Дополнительные контейнеры помещенные в основные позволяют убрать вертикальные скроллы, которые появляются при переполнении колонок информацией, применен метод выталкивания - у разных контейнеров разная ширина.
<body>
<div id="center">
<div class="center">
<div class="header">Header</div>
<div class="middle">Content</div>
<div class="footer">Footer</div>
</div>
</div>
<div id="fixed">
<div class="fixed">
<div class="fix">Fixed</div>
</div>
</div>
</body>
Приемы различаются только методом позиционирования.
Fixed на position:absolute
css
* {margin:0;padding:0;}
html,body,#center,#fixed,.center,.fixed {height:100%;}
body {margin:0 auto;position:relative;width:990px;}
#center,#fixed {position:absolute;}
#center,#fixed,.header,.middle,.middlesub,.footer {overflow:hidden;}
.center,.fixed {overflow-y:auto;}
Fixed на float:left/right
css
* {margin:0;padding:0;}
html,body,#center,#fixed,.center,.fixed {height:100%;}
body {margin:0 auto;width:990px;}
#center,#fixed {float:left;}
#center,#fixed,.header,.middle,.middlesub,.footer {overflow:hidden;}
.center,.fixed {overflow-y:auto;}
*****
Примеры снабжены дополнительной разметкой. Область контента и колонка навигации можно поменять местами с соответствующей корректировкой стилей, также колонки центральной части, могут обладать иллюзией колонок равной высоты.
Фиксированная колонка при переполнении информацией скроллируется по вертикали независимо от другой колонки. Если изначально в ней не планируется размещение больших объемов инфы, ее html-код значительно урощается.
Одним из плюсов предложенных разметок является то, что макет всегда находится по центру рабочей области браузера и при уменьшении размеров окна с появлением горизонтальной прокрутки ведет себя вполне предсказуемым образом.