Часть 2

Создав макет, перейдем к самому интересному этапу — сделаем каждой колонке свой фон и отступы для текста.

А теперь представим на мгновение, что вместо трех блоков для верстки нашего макета мы использовали таблицу с тремя ячейками. Конечно, можно было использовать именно этот способ и тогда у нас не возникло бы никаких проблем, но в этом случае код был бы несоизмеримо больше, созданного нами (если есть желание — проверьте). Но нас сейчас будет волновать не это, а совершенно другое.

Итак, давайте зададим каждому блоку свой фон:

#rightsidebar {
	width: 240px;
	float: right;
	background-color: #abb3f8;
}
#leftsidebar {
	float: left;
	width: 240px;
	background-color: #b0dbf2;
}

#content {
	margin-left: 240px;
	background-color: #999;
}

Вы увидите, что каждая колонка будет залита фоном ровно на высоту контента. Чтобы все колонки «казались» одинаковыми по высоте, используем метод «псевдоколонок».

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

Для этого подготовим две картинки. Для левой колонки и для правой.

Теперь самое время привести код, позволяющий создать иллюзию равенства колонок по высоте:

#wrap {
	float: left;
	width: 100%;
	margin-right: -240px;
	background: #999 url(bg-right.gif) repeat-y right;
	/* используется для замощения фоном если средняя часть 
	больше правой */
}

#container {
	margin-right: 240px;
	background: #999 url(bg-left.gif) repeat-y left;
	/* используется, если средняя часть больше 
	левой */
}

Теперь колонки получились равными по высоте. Но давайте попробуем сузить видимую область окна браузера. И что мы видим? Структура рушится. Чтобы этого избежать, обернем все блоки в еще один блок, у нас он называется #outer_wrapper и зададим для него минимальную ширину, например, в 800px.

#outer_wrapper { min-width: 800px; }

Знаю, знаю. Вы скажите, что это не работает в IE версии меньшей 7. А лечится это очень просто:

* html #outer_wrapper {
	width: expression(((document.documentElement.clientWidth || document.body.clientWidth) < 800)? "900px" : "100%")
}

Этот небольшой код javascript'a позволяет нам регулировать ширину указанного блока в зависимости от ширины окна браузера.

Изменив цвет шрифта на белый для большей наглядности, сравните результаты.

Данный пример и пример из первой части успешно протестированы в большинстве известных браузерах, включая IE5.5, Safari 3.0.3 (win32). Считаю что результат достигнут, и нами был получен вариант не табличной трехколоночной верстки с плавающей серединой.