Бродя по Интернету в поисках чего-то (не помню чего) связанного с CSS я наткнулся на вот такую страницу: http://blog.html.it/layoutgala/.

Как видите здесь мы имеем дело с 40 CSS-шаблонами различной раскладки. Т.е. html везде одинаков, а вот благодаря CSS достигается такое многообразие. Кстати все шаблоны сразу можно скачать здесь.

Меня лично интересует шаблон под нумером 13 (хорошее число). Это и есть, так вожделенный многими (в том числе и мной) резиновый трехколоночный CSS-дизайн. Т.е. в нем присутствует три вертикальные колонки. Одна, центральная, имеет динамический размер и две по бокам - фиксированный. Присутствует здесь также и хедер с футером.

Итак дано: HTML-код. Для краткости опускаем основные элементы - html, body, head.

<div id="container">

<div id="header"><h1>Header</h1></div>

<div id="wrapper">

<div id="content">

<p>
<strong>1) Content here.</strong> column long long column very long fill fill
fill long text text column text silly very make long very fill silly make make
long make text fill very long text column silly silly very column long very
column filler fill long make filler long silly very long silly silly silly long
filler make column filler make silly long long fill very.
</p>
<p>
very make make fill silly long long filler column long make silly silly column
filler fill fill very filler text fill filler column make fill make text very
make make very fill fill long make very filler column very long very filler
silly very make filler silly make make column column
</p>
<p>
fill long make long text very make long fill column make text very silly column
filler silly text fill text filler filler filler make make make make text filler
fill column filler make silly make text text fill make very filler column very
</p>
<p>
column text long column make silly long text filler silly very very very long
filler fill very fill silly very make make filler text filler text make silly
text text long fill fill make text fill long text very silly long long filler
filler fill silly long make column make silly long column long make very
</p>

</div>

</div>

<div id="navigation">

<p>
<strong>2) Navigation here.</strong> long long fill filler very fill column
column silly filler very filler fill fill filler text fill very silly fill text
filler silly silly filler fill very make fill column text column very very
column fill fill very silly column silly silly fill fill long filler
</p>

</div>

<div id="extra">

<p><strong>3) More stuff here.</strong> very text make long column make filler
fill make column column silly filler text silly column fill silly fill column
text filler make text silly filler make filler very silly make text very very
text make long filler very make column make silly column fill silly column long
make silly filler column filler silly long long column fill silly column very </p>

</div>

<div id="footer"><p>Here it goes the footer</p></div>

</div>

Представим расположение блоков (div) в виде картинки:

Как видно, все блоки расположены в одном большом - container (контейнер). В нем по порядку идут следующие блоки: header (хедер - заголовочная часть), далее wrapper (обертка), который обертывает блок content (содержание), далее navigation и extra, ну и наконец footer.

Теперь будем посмотреть как из такого расположения блоков получается трехколоночный резиновый дизайн.

Вначале запишем стилевые правила, отвечающие за оформление: фон, гарнитура и т.д.

html, body {
margin: 0;
padding: 0;
}

body {
font: 76% arial, sans-serif;
}

p {
margin: 0 10px 10px;
}

a {
display: block;
color: #981793;
padding: 10px;
}

div#header h1{
height: 80px;
line-height: 80px;
margin: 0;
padding-left: 10px;
background: #EEE;
color: #79B30B;
}

div#content p {
line-height: 1.4;
}

div#navigation {
background: #B9CAFF;
}

div#extra {
background: #FF8539;
}

div#footer {
background: #333;
color: #FFF;
}

div#footer p {
margin: 0;
padding: 5px 10px;
}

Теперь смотрим далее:

Назначим для wrapper следующее стилевое правило:

div#wrapper {
float: left;
}

Оно означает, что сам блок должен располагаться слева, а остальные обтекают его справа. Но этого не происходит, потому что блок wrapper занимает всю ширину страницы.

Теперь для блока navigation назначим следующие правила:

div#navigation {
float: left;
width: 200px;
margin-left: -100%;
}

Правило width: 200px; назначает блоку ширину в 200px. Если убрать margin-left: -100%; то тогда этот блок будет находиться снизу от блока wrapper. Теперь начнем постепенно добавлять к блоку navigation отрицательный левый margin. Например пусть этот margin будет в -10px. Это приведет к тому, что блок сместится влево за пределы окна. Если добавить -200px, то блок появляется справа и при этом проваливается вверх. Объяснить такой эффект я не могу. Нужно отметить, что если у блока navigation отсутствует float: left; то он так и остается за пределами окна слева, т.е. его не видно и при этом не проваливается вверх.

Как бы там ни было мы можем назначить для этого блока margin-left: -100%; тогда он всегда будет располагаться слева, перекрывая блок wrapper. Механизм я думаю ясен. Теперь мы можем назначить для extra следующие правила:

div#extra {
float: left;
width: 200px;
margin-left: -200px;
}

Это приведет к тому, что справа появится еще одна колонка. Только это колонка немного смещена от правового края. Для блока wrapper назначаем ширину в 100% и все встает на свои места.

div#wrapper {
float: left;
width: 100%;
}

В данный момент наши правая и левая колонка перекрывают текст центральной части. Исправляем ситуацию добавлением левого и правового margin для блока content.

div#content {
margin: 0 200px;
}

Теперь осталось разобраться с футером. В Опере 9.64 фон проваливается вверх закрашивая центральную часть контента темным цветом. В принципе так оно и должно быть. Только в ИЕ 7 такого не наблюдается. В любом случае назначаем футеру следующие стилевые правила.

div#footer {
clear: left;
width: 100%;
}

Все. Недостатком этой раскладки является как вы уже наверное заметили неодинаковость левой и правой колонки по высоте.

Экспериментировать с этим дизайном будем потом.