Блочно-модульная концепция - 'Техника Gordi'

Главная фишка, соль концепции в двух словах заключается в том, что шапка, центральная часть и подвал описываются одним и тем же html-кодом и стилями. А основой слоев как-то - .header, .middle, .footer, является тот самый пресловутый контейнер .middle с соответствующей начинкой.

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

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

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

<div class="header">
  <div class="content">Header Content</div>
  <div class="left">Header Left</div>
  <div class="right">Header Right</div>
</div>
<div class="middle">
  <div class="content">Middle Content</div>
  <div class="left">Middle Left</div>
  <div class="right">Middle Right</div>
</div>
<div class="footer">
  <div class="content">Footer Content</div>
  <div class="left">Footer Left</div>
  <div class="right">Footer Right</div>
</div>

"Техника Gordi", это не только взгляд автора на структуру web-страницы, но и комплекс мер направленный на оптимизацию html-кода и стилей, легкую трансформацию в разные варианты визуального представления макетов.

Возможное расположение колонок навигации относительно области контента, несколько примеров из коллекции автора:

Различное расположение блоков в слоях делаем по аналогии.

Ограничение - нужно учитывать, что область контента и колоноки навигации в некоторых макетах, имеют плавающую ширину.