Grail Gordi плюс DIV

Продолжаем модификацию метода получения колонок равной высоты основанной на "Grail Gordi".

На странице, где мы рассмотрели прием создания разметки центральной части web-страницы с колонками равной высоты разного цвета:

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

Стремимся к такому:

html-код:

<div class="middle">
 <div class="border">
  <div class="wrap">
    <div class="content">...</div>
    <div class="left">...</div>
    <div class="right">...</div>
  </div>
 </div>
</div>

Появление в макете визуала вертикальных линий, потребовало введения в разметку еще одного дополнительного контейнера с классом "border", название условно, выбрано с целью простоты объяснений.

Собственно, отсюда и заголовок статьи - "Grail Gordi плюс DIV"

В стилях убрано все, что не имеет отношения к решению заявленной проблемы, в частности убраны стили для IE6(7). В примерах все будет в полном объеме.

css:

.middle {
  background-color:#ccf; /* Цвет правой колонки */
  border:#000 1px solid;
  margin:5px auto;
  min-width:920px;max-width:990px;
}
.border {
  background-color:#afa; /* Цвет левой колонки */
  border-left:#000 1px solid;
  margin:0 0 0 200px;
}
.wrap {
  background-color:#fff; /* Цвет области контента */
  border-left:#000 1px solid;
  margin:0 0 0 200px;
}
.content,.left,.right {float:left;overflow:hidden;width:200px;}
.content {margin-right:-100%;width:100%;}
.left {margin-left:-401px;}
.right {margin-left:-201px;}

.wrap:after {content:'';clear:both;display:block;}

Соответствующее поле (margin-left) и фоновая заливка (background), для блоков - .middle, .border, .wrap, позволяют довольно простым способом справиться с поставленной задачей.

Теперь дело стало за малым - произвести очередную модернизацию и получить "Идеальный Holy Grail Gordi":

Дополнительные примеры можно посмотреть на соответствующей странице раздела.