OPERA - кошка, что гуляет сама по себе.

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

Под затянувшиеся праздники, явно пошли на пользу :)

Перебирание своих архивов, уточнение кое-каких деталей, что в основном свелось к проверке макетов в последних релизах браузеров, вышедших на этот день, привело, в конечном счете, к не большому циклу публикаций под условным названием "Верстаем без float".

Отвечу на возможно не заданный вопрос. К чему все эти заморочки, поиски альтернативы, ведь есть же устоявшиеся каноны? Тем более что верстка на основе техники float и на страницах этого блога представлена во всем совсем многообразии?

Ответ прост. Многое из того, что предлагается вашему вниманию, нигде ранее не встречалось или, по крайней мере, имеющиеся материалы и примеры к ним, не позволяли избавиться от присущих той или иной технике недостатков. А уж про совершенно лишний html-код и стилей кучу-малу ни слова :)

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

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

Это позволяет иначе взглянуть на некоторые стилевые свойства и само по себе открывает новые горизонты и перспективы по их использованию.

Но как говорится ближе к делу.

html и css

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

<style type="text/css">
#main {
  border:#000 1px solid;
  margin:5px auto;
  width:980px;
}
#middle {
  background:#ff9;
  border-right:#cc9 200px solid;
  border-left:#ddd 200px solid;
}
.left,.content,.right {
  display:inline-block;
  position:relative;
  vertical-align:top;
}
.content {background:#ff9;margin-right:-100%;width:100%;}
.left {left:-200px;width:200px;}
.right {right:-377px;width:200px;}

</style>
<!--[if lt IE 8]>
<style type="text/css">
.left,.content,.right {display:inline;}
</style>
<![endif]-->
<!--[if IE ]>
<style type="text/css">
.right {margin-left:3px;}
</style>
<![endif]-->

Контейнер с классом mail необходим для создания окантовки вокруг макета, и расположением его по центру окна браузера, и возможно, для реализации резиновой области, с ограничением по min/max-width, отведенной под контент.

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

Для размещения колонок по горизонтали, вместо набившего оскомину float, "крутым" браузерам подсовываем display:inline-block;, а IE6(7) display:inline;

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

position:relative; для .content можно исключить, но может стать необходимым при разметке с иным расположением колонок навигации относительно области контента.

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

Что же касается OPERA, никогда не был ее поклонником. Причуды этого браузера, своеобразная манера понимания некоторых стилевых правил, часто не находит никакого приемлемого объяснения. И в этом смысле, иногда OPERA ведет себя в довольно простых ситуациях, когда нет явного "криминал", в не всякого сомнения, хуже, чем тот же IE.

Пример вам все покажет.

FireFox 3, IE6(7, 8beta2), SafariWin, Chrome - полет нормальный :)