В комментариях к статье "Одинаковая высота колонок – border" был поднят вопрос об индивидуальном цвете колонок отведенных под навигацию. Вернее, если я правильно понял данное замечание, это касалось только двух макетов, а именно, колонки навигации находятся рядом друг с другом и расположены слева или справа от области контента. Там же приводился линк, где нечто подобное было сделано.

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

Но не будем слишком строги :)

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

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

html-код из указанной статьи без всяких изменений, хотя разговор пойдет только о двух макетах, но по традиции в заключение статьи вы сможете посмотреть все пять примеров, дополненных, так нужной кому-то эмуляцией nim/max-width для IE6 :)

Необходимые манипуляции для получения нужного результата.

Стили до :

#middle {
  margin:3px auto;
  min-width:910px;
  max-width:960px;
}
*html #middle {width:960px;}
.wrap {
  background-color:#fff;
  border-left:#eee 400px solid;
  height:100%;
}
.wrap:after {content:'';clear:both;display:block;}
.content,
.left,
.right {float:left;overflow:hidden;position:relative;}
.content {margin-right:-100%;width:100%;}
.left {margin-right:-100%;width:200px;left:-400px;}
.right {margin-right:-200px;left:-200px;width:200px;}

Стили после :

#middle {
  background-color:#ddd;
  margin:3px auto;
  min-width:910px;
  max-width:960px;
}
*html #middle {width:expression(
  (document.compatMode && document.compatMode == 'CSS1Compat') ?
  (document.documentElement.clientWidth < 910 ? "910px":
  (document.documentElement.clientWidth > 960 ?"960px" :"auto")) :
  (document.body.clientWidth < 910 ? "910px" :
  (document.body.clientWidth > 960 ? "960px" :"auto")));
}
.wrap {
  background-color:#fff;
  border-left:#eee 200px solid;
  margin-left:200px;
  height:100%;
}
.wrap:after {content:'';clear:both;display:block;}
.content,
.left,
.right {float:left;overflow:hidden;position:relative;}
.content,.left {margin-right:-100%;}
.content {width:100%;}
.left {left:-400px;width:200px;}
.right {left:-200px;width:200px;}

Нововведения выделены цветом.

Появилось всего несколько новых стилевых правил, но этого оказалось вполне достаточно.

Для #middle указан background-color:#ddd; это и будет цвет одной из колонок.

Для .wrap вместо прежней ширины border-а в 400px, произошла разбивка на две равные части этого значения: border-left:#eee 200px solid; и margin-left:200px; и теперь другая колонка будет цветом #eee.

Вот так все достаточно легко и просто и самое главное это никоим образом не затрагивает html-код страницы, что само по себе уже приятно.

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

Как это сделать читаем предыдущий пост: "Super Holy Grail Gordi".

Вот только вертикальный border отделяющий область контента от колонок навигации нарисовать не судьба. Минус особенностей разметки :)

Переходим к примерам.