В свое время мной была опубликована разметка центральной части web-страницы с колонками равной высоты.

Практика использования оной в различных вариациях с расположением колонок навигации относительно области контента, отлично себя зарекомендовала и без каких-либо изменений, перенесена в свежие версии скриптов став основой дефолтного оформления скриптов Мастера Lasto – Lasto Blog и nano-CMS, пользующихся заслуженной популярностью у многочисленной армии его поклонников.

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

В данном случае была предпринята попытка решить проблему 100% высоты предлагаемой разметки, но…

Строка стилевых правил:

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

позволяющая корректно отображать колонки равной высоты в современных браузерах – FireFox, OPERA, Google Chrome и даже в IE7(8), а вот с IE6 нет никаких проблем, препятствует растяжению колонок по высоте.

К плюсам можно отнести вывод области контента по html-коду раньше колонок навигации, плавающую ширину оной, а также правильность работы меток-якорей, что при использовании:

  margin-bottom:-32767px;padding-bottom:32767px;

не представляется возможным.

Что еще можно сделать слегка по извращавшись :)

В представленном примере все колонки оснащены, индивидуальны цветным border’ом. О том, что для этого необходимо, нет смысла расписывать от и до.

С одноцветной окантовкой все несколько упрощается, пример приводиться не будет, это для любителей по практиковаться в тонкостях html и css.