Продолжим, возможно, бесконечный сериал.

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

Использование стилевых правил:

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

Решает эмуляцию равной высоты колонок, позволяя задавать колонкам разный background-color (background:url(…)), но кроме проблемы не корректной работы меток-якорей есть и еще одна - нижний border, его-то простыми средствами никак не пристроишь, пример, где он явно указан, но визуально отсутствует.

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

Приведу только одно наблюдение, по любой из методик в прикручивании нижнего border’a, кроме как прорисовка solid, а нам-то этого мало, и то не идеальная, сводит, на нет все усилия.

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

Часто обращаюсь опубликованным мной ранее статьям и примерам. И не только для того, чтобы освежит в памяти, в момент написания, увлеченный той или иной идеей, на многие вещи просто не обращал должного внимания и многие нюансы, оставались за кадром.

Вот и давайте "закроем" проблему нижнего border’a раз и навсегда.

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

Что является основой блочно-модульной концепции "Техника Gordi"?

Это так многим, да и самому себе изрядно поднадоевший контейнер (кирпич), которому посвящена не одна страница блога, скоро потянет на книгу :), а именно блок middle со своей внутренней структурой, позволяющий простыми средствами получить, как минимум пять вариантов расположения колонок навигации относительно области контента.

В общем случае этого вполне достаточно для любителей и профессионалов, занимающихся версткой web-страниц. Набор шаблонов построенных на основе блока middle, в каком-то смысле универсален и может быть рекомендован к применению, практически во всех случаях.

Рассмотрим решение проблемы нижнего border’a на основе стандартной трех колоночной разметки.

<div class="middle">
  <div class="wrap">
    <div class="center">Middle Content</div>
    <div class="left">Middle Left</div>
    <div class="right">Middle Right</div>
  </div>
</div>

html-код ставший классикой для подобного рода публикаций.

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

<div class="footer">
  <div class="wrap">
    <div class="center height"></div>
    <div class="left height"></div>
    <div class="right height"></div>
  </div>
</div>

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

В заключении приведу один из вариантов полноценной страницы.

Комбинируя, используя блок middle в качестве header и footer, через наследование соответствующих стилей можно получить многочисленные вариации web-страниц, имеющих все необходимые атрибуты – сто процентная высота, независимая фоновая заливка, border для каждой колонки различного цвета и т.д. и т.п.

P.S. Предложенное решение актуально и для фиксированных блоков на web-странице, но об этом в следующий раз.

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

Как оказалось это не совсем так.

Спасибо Дима, твой комментарий заставил поискать решение данной проблемы.

Так бы остановился на достигнутом и дело с концом :)

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

Великое дело эти акценты, иногда все лежит на поверхности, но в упор не видишь. А когда сделаешь, то понимаешь, как же оно все просто, и чего же раньше-то не додумался.

Один пример, html-код header и footer может быть иным.

Использование блочно-модульной концепции "Техника Gordi" в данном случае позволяет простыми методами создать web-страницу с хорошо структурированными блоками без необходимости в дополнительной разметке.

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

Проверенно и работает в IE6(7,8), OPERA9.64, FireFox3.0, Chrome, SafariWin.

Долго верстальщики искали обходные пути, чтобы заставить IE6 хоть каким-то образом поддерживать min/max-width, без применения expression.

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

На сколько все это актуально, не знаю.

Выкладываю, может, кому еще и пригодится.

* {margin:0;padding:0;}
body {
  background-color:#fff;margin:3px auto;
  padding-left:600px;width:10%;
}
.middle {border:#000 1px solid;margin-left:-600px;}

 <body>
   <div class="middle">...</div>
 </body>

Пример

Чуть позже, сделаю несколько примеров разметки в различных вариациях на эту тему с использованием блочно-модульной концепции "Техника Gordi".

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

Проверено в IE6 (7,8), OPERA9.64, FF3, SafariWIN, Chrome.