Симбиоз перечисленных в заголовке стилевых правил, для полноты картины не хватает border-а, позволит, а тут мы возвращается к публикациям – "Верстаем без float" и "IE7 самый крутой браузер…", минимальными средствами получить нормально функционирующую web-страницу, не без недостатков конечно.

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

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

Это собственно и есть все ограничения.

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

Окантовка вокруг макета? Очень часто в ней тоже нет необходимости.

Вертикальные линии между контентной частью и колонками навигации, в общем-то, тут тоже на любителя.

Что получаем взамен?

Простой, ясно читаемый html-код с минимумом css.

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

Легко создаваемая, с включением header-а, сто процентная высота макета.

Область котнента сразу идет за header-ом. При известном желании, header можно довольно просто сбросить вниз по html-коду.

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

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

Вот о читателях и поговорим.

Настойчивость Ивана Броткина, в комментариях к "Верстаем без float", с иллюстрацией примерами, помогла решить проблему, озвученную в здесь.

Могу ошибаться, но Иван, судя по его ресурсу, только начинает свой путь в паутине. Даже если это не так, то все равно, думаю, он двигается в верном направлении.

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

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

Любой более или менее значимый материал должен быть обеспечен соответствующей примерной базой. Какой толк и прок оттого, что иные "гуру-гении" могут в одном слове озвучить проблему и ее решение? И что в таком случае делать тому, кто только начинает свой путь, а он не усыпан, как известно розами?

Риторические это вопросы, как же без них :)

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

Наша дискуссия, вернее диалог с Иваном, позволил сделать вывод, что использование только связки - relative/absolute, не позволит создать трех колоночный макет и включение float насущно необходимо.

Проблема с трех колоночным шаблоном была решена. Иван отметился у себя постом.

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

Для фиксации правой колонки при уменьшении размеров окна браузера по горизонтали, .right пришлось добавить float:right.

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

Примеры дополнены header и имеют сто процентную высоту. Обратите внимание, как это сделано, есть разница между двух и трех колоночными шаблонами.

html-код и стили, находятся на тестовых страницах.

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

P.S.

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

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

<div class="header">Header</div>
<div class="middle">
  <div class="content">Content</div> 
  <div class="left">Left</div> - исключаем, если не нужен
  <div class="right">Right</div> - исключаем, если не нужен
</div>
<div class="footer">Footer</div>

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

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 - полет нормальный :)

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

Разметка 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, так, как широкого примения ей не вижу :(