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

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

Реализация подобной фишки не представляет никаких трудностей, тем более, что это не приводит к увеличению исходного html-кода.

Итак, бонус к разметке на основе - "Grail Gordi":

html-код:

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

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

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

Для упрощения процедуры подбора одного единственно параметра - margin-bottom или padding-bottom для блоков с классами left и right, сначала необходимо бонусные блоки наполнить информацией под завязку, далее формируем контент колонок навигации и выставляем соответствующий размер квазивысоты для margin-bottom или padding-bottom для блоков с классами left и right.

Фрагмент таблицы стилей:

.left {margin-bottom:90px;}
.right {margin-bottom:90px;}

.box {
  background-color:#fff;
  border:#000 1px solid;
  margin:2px auto;width:500px;
}
.left_border .box {background-color:#afa;width:194px;}
.right_border .box {background-color:#fff;width:194px;}

Поведение макета с бонусными блоками при увеличении высоты колонок центральной части:

Бонусным контейнером можно оснастить и область контента, поступаем аналогично, как и в случае с колонками навигации.

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

Пример.