Собственно говоря, идея использовать border-style:double; для глобальной разметки web-страницы пришла спонтанно и довольно неожиданно, а давняя и «не ржавеющая» любовь к абсолютному позиционированию оказалась весьма кстати.

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

Но вот время нашлось, и вам предлагается необычный трюк с border-style:double; и его полноценная реализация, что-что, а в изобретательности Мастеру Горди отказать очень трудно и многие публикации на страницах блога лучшее тому подтверждение :)

Не знаю насколько проще данная реализация, может выглядеть при табличной верстке, но как вы понимаете делать на таблицах нечто подобное, когда все уже выполнено на блоках-контейнерах, не входит в планы Мастера Горди даже ради спортивного интереса.

Для начала скриншот.

Ничего не обычного.

100% высота макета.

Горизонтальное меню и header по html-коду расположены в самом конце страницы.

Колонки центральной части – Left, Content, Right, а область контента выводится раньше боковых колонок при загрузке страницы, обладают иллюзией одинаковой высоты, независимо от наполнения любой из них.

Дополнительные блоки, расположенные в этих колонках чуть выше, имеют фоновую заливку индивидуального цвета, а border цвета основной колонки, что не очень хорошо, но принципы построения web-страницы на основе колонок равной высоты не позволяют обойти данное препятствие.

Теперь самое главное.

Чтобы организовать нижний border у дополнительных блоков и визуально разделить их по вертикали необходимы - связка:

position:relative/absolute
border-style:double
а также наличие пустого контейнера с фоновой заливкой цвета body.

Пример № 1

Естественно, многое упрощается, если border у всех блоков будет одинаковым по цвету. Это касается как стилей, так и html-кода.

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

Пример № 2

Расписывать в подробностях что, как, зачем и почему нет необходимости, забираем примеры и приятного вам времяпровождения :)

Тут, важна идея, возможно, кому-то этот прием пригодится при создании подобной структуры глобальной разметки web-страницы.

Практический пример.

Взяв за основу скрипты от Мастера Lasto, как-то – nano-CMS и Google Referent, можно сотворить простенький новостийный ресурс.

Автор выражает признательность и благодарность Вадиму Ласто, в решении ряда технических проблем.

Демо версию в самурайском стиле к скрипту Google Referent, смотрим здесь.