Holy Grail - display:inline-block;

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

В последнее время, это лишь субъективное впечатление, очень многие пропагандируют стилевые правила display:inline-block; и display:inline; для IE6(7), как альтернатива разметки на основе float.

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

Но давайте по порядку.

html-код:

<body>
  <div id="main">
    <div id="middle">
      <div class="content">...</div>
      <div class="left">...</div>
      <div class="right">...</div>
    </div>
  </div>
</body">

Ничего не обычного, все по науке.

Если вместо DIV проставить табличные теги, то ничего лишнего нет, а область контента идет раньше колонок навигации, что являтся плюсом.

Вся хитрость, как всегда спрятана в стилях, ведь понятно, что равную высоту колонок сделать с display:inline... совсем не просто.

Посмотрим стили:

* {margin:0;padding:0;}
#main {
  border:#000 1px solid;margin:10px auto;
  min-width:910px;max-width:980px;
}
#middle {
  background-сolor:#ff9;
  border-right:#cc9 200px solid;
  border-left:#ddd 200px solid;
}
.content,.left,.right {
  display:inline-block;position:relative;
  vertical-align:top;overflow:hidden;
}
.content {margin-right:-100%;width:100%;}
.left {right:200px;margin-right:-200px;width:200px;}
.right {right:-100%;width:200px;}

*+html #middle {overflow:hidden;}
*+html .content,*+html .left,*+html .right {display:inline;}
*html #main {width:980px;}
*html .content,*html .left,*html .right {display:inline;}
*html .right {right:-580px;}

В краце фишка вот в чем.

Есть основной контейнер #main, в него вложен еще один #middle - разноцветный с border'ами в ширину колонок навигации.

Далее с помощью относительного позиционирования (position:relative;) и отрицательных полей (margin), колонки отведенные под контент раскладываются так, как надо.

Двух колоночные макеты создаются аналогично.

Есть ряд нюансов, но надеюсь, работа с примерами, доставит вам массу удовольствия и разочарований.

Holy Grail - display:inline-block;

Trifler.ruХобби провинциала