Блочно-модульная концепция "Техника Gordi", глобальная разметка web-страницы. Автор Serg Gordi

Варианты расположения колонок в модуле #middle_xx:

1. Изменения в стилях относительно базового варианта #middle_00 выделены цветом, в html-коде - варианты #middle_01 и #middle_02, сотвествующие колонки удалены, тоже и для #middle_05 и #middle_06, только колонки шире

2. Секция в таблице стилей "No" одна и таже для всех вариантов и редактированию не подлежит !!!

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

4. Общая ширина макета для IE 6 фиксирована, но с помощью width:expression - всего две строчки, вы сможете легко исправить ситуацию:

*html body {width:expression(documentElement.clientWidth < 920 ?(documentElement.clientWidth == 0 ?(body.clientWidth < 920 ?"920" :"auto") :"920px") :"auto");} *html #middle_xx {width:expression(documentElement.clientWidth > 960 ?(documentElement.clientWidth == 0 ?(body.clientWidth >960 ?"960" :"auto") :"960px") "auto");}

Делаем колонку длиннее

MIDDLE Content - #middle_00 (стандартная трех колоночная разметка)

   HTML

  <div id="middle_00" class="bord">
      <div class="wrap_00">
        <div class="content_00">MIDDLE Content</div>
      </div>
      <div class="right_00 bordl">MIDDLE Right</div>
      <div class="left_00 bordr">MIDDLE Left</div>
  </div>

   CSS
    /* No */
  #middle_00 {overflow:hidden;}
  .wrap_00 {width:100%;}
  .wrap_00,.left_00,.right_00 {margin-bottom:-32767px;padding-bottom:32767px;}
    /* Yes */
  #middle_00 {margin:2px auto;min-width:920px;max-width:960px;}
  *html #middle_00 {width:960px;}
  .wrap_00 {background-color:#fff;float:left;margin-right:-960px;}
  .content_00 {padding:0 200px;}
  .left_00 {background:url(left.png) repeat-y #eee;width:200px;float:left;}
  .right_00 {background:url(left.png) repeat-y #ddd;width:200px;float:right;}

Делаем колонку длиннее

MIDDLE Right

Делаем колонку длиннее

MIDDLE Left

Делаем колонку длиннее

MIDDLE Content - #middle_01

   HTML

  <div id="middle_01" class="bord">
      <div class="wrap_01">
        <div class="content_01">MIDDLE Content</div>
      </div>
      <div class="left_01 bordr">MIDDLE Left</div>
  </div>

   CSS
    /* No */
  #middle_01 {overflow:hidden;}
  .wrap_01 {width:100%;}
  .wrap_01,.left_01,.right_01 {margin-bottom:-32767px;padding-bottom:32767px;}
    /* Yes */
  #middle_01 {margin:2px auto;min-width:920px;max-width:960px;}
  *html #middle_01 {width:960px;}
  .wrap_01 {background-color:#fff;float:left;margin-right:-960px;}
  .content_01 {padding:0 0 0 200px;}
  .left_01 {background:url(left.png) repeat-y #eee;width:200px;float:left;}

Делаем колонку длиннее

MIDDLE Left

Делаем колонку длиннее

MIDDLE Content - #middle_02

   HTML

  <div id="middle_02" class="bord">
      <div class="wrap_02">
        <div class="content_02">MIDDLE Content</div>
      </div>
      <div class="right_02 bordl">MIDDLE Right</div>
  </div>

   CSS
    /* No */
  #middle_02 {overflow:hidden;}
  .wrap_02 {width:100%;}
  .wrap_02,.left_02,.right_02 {margin-bottom:-32767px;padding-bottom:32767px;}
    /* Yes */
  #middle_02 {margin:2px auto;min-width:920px;max-width:960px;}
  *html #middle_02 {width:960px;}
  .wrap_02 {background-color:#fff;float:left;margin-right:-960px;}
  .content_02 {padding:0 200px 0 0;}
  .right_02 {background:url(left.png) repeat-y #ddd;width:200px;float:right;}

Делаем колонку длиннее

MIDDLE Right

Делаем колонку длиннее

MIDDLE Content - #middle_03

   HTML

  <div id="middle_03" class="bord">
      <div class="wrap_03">
        <div class="content_03">MIDDLE Content</div>
      </div>
      <div class="right_03 bordl">MIDDLE Right</div>
      <div class="left_03 bordl">MIDDLE Left</div>
  </div>

   CSS
    /* No */
  #middle_03 {overflow:hidden;}
  .wrap_03 {width:100%;}
  .wrap_03,.left_03,.right_03 {margin-bottom:-32767px;padding-bottom:32767px;}
    /* Yes */
  #middle_03 {margin:2px auto;min-width:920px;max-width:960px;}
  *html #middle_03 {width:960px;}
  .wrap_03 {background-color:#fff;float:left;margin-right:-402px;}
  .content_03 {padding:0 400px 0 0;}
  .left_03 {background:url(left.png) repeat-y #eee;width:200px;float:left;}
  .right_03 {background:url(left.png) repeat-y #ddd;width:200px;float:right;}

Делаем колонку длиннее

MIDDLE Right

Делаем колонку длиннее

MIDDLE Left

Делаем колонку длиннее

MIDDLE Content - #middle_04

   HTML

  <div id="middle_03" class="bord">
      <div class="wrap_03">
        <div class="content_03">MIDDLE Content</div>
      </div>
      <div class="right_04 bordr">MIDDLE Right</div>
      <div class="left_04 bordr">MIDDLE Left</div>
  </div>

   CSS
    /* No */
  #middle_04 {overflow:hidden;}
  .wrap_04 {width:100%;}
  .wrap_04,.left_04,.right_04 {margin-bottom:-32767px;padding-bottom:32767px;}
    /* Yes */
  #middle_04 {margin:2px auto;min-width:920px;max-width:960px;}
  *html #middle_04 {width:960px;}
  .wrap_04 {background-color:#fff;float:left;margin-right:-960px;}
  .content_04 {padding:0 0 0 400px;}
  .left_04 {background:url(left.png) repeat-y #eee;width:200px;float:left;}
  .right_04 {background:url(left.png) repeat-y #ddd;width:200px;float:left;}

Делаем колонку длиннее

MIDDLE Right

Делаем колонку длиннее

MIDDLE Left

Делаем колонку длиннее

MIDDLE Content - #middle_05

   HTML

  <div id="middle_05" class="bord">
      <div class="wrap_05">
        <div class="content_05">MIDDLE Content</div>
      </div>
      <div class="left_05 bordr">MIDDLE Left</div>
  </div>

   CSS
    /* No */
  #middle_05 {overflow:hidden;}
  .wrap_05 {width:100%;}
  .wrap_05,.left_05,.right_05 {margin-bottom:-32767px;padding-bottom:32767px;}
    /* Yes */
  #middle_05 {margin:2px auto;min-width:920px;max-width:960px;}
  *html #middle_05 {width:960px;}
  .wrap_05 {background-color:#fff;float:left;margin-right:-960px;}
  .content_05 {padding:0 0 0 400px;}
  .left_05 {background:#eee;width:400px;float:left;}

Делаем колонку длиннее

MIDDLE Left

Делаем колонку длиннее

MIDDLE Content - #middle_06

   HTML

  <div id="middle_06" class="bord">
      <div class="wrap_06">
        <div class="content_06">MIDDLE Content</div>
      </div>
      <div class="right_06 bordl">MIDDLE Right</div>
  </div>

   CSS
    /* No */
  #middle_06 {overflow:hidden;}
  .wrap_06 {width:100%;}
  .wrap_06,.left_06,.right_06 {margin-bottom:-32767px;padding-bottom:32767px;}
    /* Yes */
  #middle_06 {margin:2px auto;min-width:920px;max-width:960px;}
  *html #middle_06 {width:960px;}
  .wrap_06 {background-color:#fff;float:left;margin-right:-960px;}
  .content_06 {padding:0 400px 0 0;}
  .right_06 {background:#ddd;width:400px;float:right;}

Делаем колонку длиннее

MIDDLE Right

P.S.
1. Выбрав необходимую вам конфигурацию, и использовав блочно-модульный концепт "Техники Gordi", все подробности в цикле под общим заголовком "Иллюзия идеала", с помощью группирования и наследования вы существенно сократите файл стилей отвечающий за глобальную разметку страницы.
2. К большому сожалению в FireFox 3.xx, в отличии от FireFox 2.xx, вертикальные линии (border) отделяющие колонки друг от друга ведут себя отвратительно. Есть смысл отказаться от них, используя только, как визуальный ориентир для настройки ширины колонок.
3. Печать и предварительный просмотр печати в IE 6(7) из-за использования свойства overflow:hidden; является проблемным моментом. FireFox, OPERA ведут себя достойно.
4. Других противопоказаний нет, по крайней мере, на сегодня, мне о них ничего не известно. Не удачное сочетание не которых стилевых правил, уже не самой разметки старницы, может привести к появлению бесконечной вертикальной прокрутки, очень часто этим грешит OPERA, если вы не в состоянии решить данную проблему, вам надо срочно повышать свою квалификацию или отказаться от моего столь заманчивого предложения :)