Поиски альтернативы.

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

В основном это касается "народного" приложения от Microsoft.

Говорить гневные слова и сетовать на то, что ничего не меняется, нет смысла. Будем исходить из того, что это дано "свыше" и обсуждению не подлежит.

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

Естественно, попытки совместить несовместимое, предпринимались не однократно. Не буду давать ссылок на те или иные примеры, поиск вам в руки, найдете не мало интересного.

Предлагаю собственную импровизацию на тему.

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

Речь пойдет о стандартном трех колоночном макете – left-content-right.

Как это может повлиять на продвижение ресурса, тема отдельного разговора, и могу сразу сказать, это не входит мою компетенцию, мнений на это счет не меряно, гуру от SEO, все расскажут, и может быть, даже покажут за определенное материальное вознаграждение :)

Думаю, вы догадались сразу, что рассматривать будем так полюбившийся не только автору, но и его читателям контейнер под прозаическим названием #middle. Прикрутить к нему header и footer настолько простая задача, что рассказывать, а тем более показывать, как это сделать, не считаю в рамках данной статьи необходимым.

html и css

<div id="main">
   <div id="middle">
      <div class="wrap">
        <div class="left">Left</div>
        <div class="content">Content</div>
        <div class="right">Right</div>
     </div>
   </div>
</div>

<style type="text/css">
* {margin:0;padding:0;}
body {background-color:#9a9;}
#main {
  border:#000 1px solid;margin:5px auto;
  min-width:920px;max-width:1000px;
}
#middle {display:table;width:100%;}
.wrap {display:table-row;}
.left,.content,.right {display:table-cell;}
.left {background-color:#9dd;width:25%;}
.content {
  background-color:#fff;
  border:#000 solid;
  border-width:0 1px;width:50%;
}
.right {background-color:#99b;}
</style>
<!--[if IE] >
<style type="text/css">
*html #main {
 width:expression(
 (document.compatMode && document.compatMode == 'CSS1Compat') ?
 (document.documentElement.clientWidth < 920 ?"920px":
 (document.documentElement.clientWidth > 1000 ?"1000px":"auto")) :
 (document.body.clientWidth < 920 ? "920px":
 (document.body.clientWidth > 1000 ? "1000px":"auto")));
}
#middle {position:relative;overflow-y:hidden;}
.left,.content,.right {
  display:inline;
  margin-bottom:-32767px;padding-bottom:32767px;
  overflow-x:hidden;vertical-align:top;
  position:relative;zoom:1;
}
.content {margin-right:-100%;}
.right {right:-50.2%;width:24.8%;}
</style>
<![endif]-- >

Стилевое правило, display:table; изначально предполагает одинаковую высоту колонок, а для тех, кто не понимает реализация равной высоты колонок, достигается с помощью использования:

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

Фоновая заливка, а также графика, размножаемая по вертикали, не зависимы для любой из колонок. Вертикальные линии – border, отделяющие область контента от колонок навигации присутствуют.

Практически все размеры ширины указаны в процентах или не указаны вовсе, сам макет ограничен по ширине в пикселях с помощью min/max-width и его эмуляцией для IE6.

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

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

Размеры графики, любых блоков, которым указана фиксированная ширина больше ширины колонок, приведет к нарушению макета.

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

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

По причинам, изложенным выше, не стал доводить разметку до ума в IE8beta2, так, как широкого примения ей не вижу :(