Grail Gordi плюс border

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

Если внимательно рассмотреть пример, то можно заметить, что цвет колонок навигации может быть только одинаковым.

В стандартной трех колоночной разметке типа: Left-Content-Right, это не так уж и важно, но вот при расположении колонок навигации рядом друг с другом слева или справа от области контента - Left-Right-Content или Content-Left-Right, хотелось бы их по цвету, совсем чуть-чуть, да разделить.

html-код макета центральной части макета остается неизменным:

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

В таблице стилей корректируем только css для класса wrap.

Следует понимать, что что-то приобретая всегда теряем...

В данном случае не будет вертикальных линий отделяющих область контета от колонок навигации.

css:

* {margin:0;padding:0}
body {background-color:#fff;}

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

.wrap:after {content:'';clear:both;display:block;}
*html .middle {width:expression(
  (document.compatMode && document.compatMode == 'CSS1Compat') ?
  (document.documentElement.clientWidth < 920 ? "920px" :
  (document.documentElement.clientWidth > 990 ? "990px" : "auto")) :
  (document.body.clientWidth < 920 ? "920px" :
  (document.body.clientWidth > 990 ? "990px" : "auto")));
}
*html .middle,*html .wrap {zoom:1;}
*html .middle,*html .content,*html .left,*html .right {position:relative;}
*+html .wrap {zoom:1;}

Пример - LCR.

Для CLR, все не на много сложнее.

Правим стили:

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

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