Человек, по-настоящему мыслящий, черпает из своих ошибок не меньше познания, чем из своих успехов.
Джон Дьюи

Базовая разметка

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

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

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

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

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

Макет должен быть отцентрирован относительно вертикальных границ окна браузера, при разных разрешениях экрана монитора, все предлагаемые примеры про тестированы в диапазоне от 1024*768 до 1600*900

Ширина области контента имеет регулируемые параметры, что дает практически полный контроль над ней, тут используем привычную всем связку margin:0 auto; и min/max-width и его эмуляцию на основе width:expression для IE6.

baza 1 
CSS

html,body,.wrap {height:100%;}
html {overflow-y:hidden;}
body {margin:0 auto;min-width:760px;max-width:96%;}
body,.wrap {position:relative;}
* {margin:0;padding:0;}
.wrap {overflow-y:auto;}

.header,.middle,.footer {margin:2px 205px 0 0;overflow:hidden;}
.fixed {
  position:absolute;top:2px;right:18px;
  bottom:0;z-index:20;width:200px;
}

.header {height:100px;}
.middle {min-height:100%;}
.footer {height:80px;}
/* hack for IE6 */
*html .fixed {height:99.3%;}
*html .header,*html .middle,*html .footer {zoom:1;}
*html .middle {overflow-y:visible;height:100%;}
*html body {
  width:expression(
  document.documentElement.clientWidth < 760 ? '760px' :
  (document.documentElement.clientWidth > 96 ? '96%' : 'auto'));
}

HTML

<body>
  <div class="wrap">
    <div class="header">Header</div>
    <div class="middle">Middle</div>
    <div class="footer">Footer</div>
  </div>
  <div class="fixed">Fixed</div>
</body>

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

Оставить комментарий.