Идеальный Holy Grail Gordi

В очередной модернизации метода получения колонок одинаковой высоты основанной на "Grail Gordi", будем шаг за шагом стремиться к идеалу.

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

Не будем делать упора на разноцвет фоновой заливки и border'a.

Пока ограничимся этим:

html-код:

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

По сравнению с начальным html-кодом "Grail Gordi", появилось два контейнера, которые необходимы для резки border-bottom блока с классом middle.

Им задано абсолютное позиционирование с соответствующей высотой и шириной, а также background-color под цвет body.

Посмотрим стили, в них убрано все лишнее, оставлено только то, что отвечает за прорисовку окантовки колонок.

css:

body {background-color:#fff;}
.middle {
  background-color:#efefef;
  border:#000 solid;border-width:0 1px 1px;
}
.wrap {
  background-color:#fff;
  border-right:#000 4px double;
  border-left:#000 4px double;
}
.content,.left,.right {border-top:#000 1px solid;}
.border_left,.border_right {background-color:#fff;}

Не трудно заметить, что вертикальные линии отделяющие область контента от колонок навигации, есть ничто иное, как border со стилем double.

background-color для .border_left,.border_right следует объеденить с background-color body, но засада не в том...

Проблема в border'е со стилем double, цвет подложки на которой собственно и лежат линии образующие злополучный border, не может быть изменен под цвет body и блоков - .border_left,.border_right.

Цвет подложки, это цвет области контента, задан блоку - .wrap.

Не лишним будет упомянуть и странное поведение border-style:double; в IE6(7).

* * * * *

Идеальный "Holy Grail Gordi" - часть вторая.