Тема одинаковой высоты колонок и ее эмуляция через border, и попытка для этих целей использовать вместо float - display:inline-block/inline получила свое продолжение.

Хотя, на мой взгляд, она себя исчерпала, но все же.

В примере к статье display:inline-block…, неприятности своим поведением доставила OPERA.

Илья Cтpeльцын (aka SelenIT) в своем дополнении к моему примеру подал идею и вот не устоял перед соблазном, довести до ума не совсем уже удачный пример.

Речь идет о:

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

Переработанные стили плюс min/max-width для основных браузеров, IE6 отдыхает :)

<style type="text/css">
#main {
   border:#000 1px solid;
   margin:0 auto;
   min-width:910px;
   max-width:980px;
}
#middle {
   background:#ff9;
   border-right:#cc9 200px solid;
   border-left:#ddd 200px solid;
   white-space:nowrap;/* for OPERA */
}
.content,.left,.right {
   display:inline-block;
   position:relative;
   vertical-align:top;
   white-space:normal;
}
.content {background:#ff9;margin-right:-100%;width:100%;}
.left {right:200px;margin-right:-200px;width:200px;}
.right {right:-100%;width:200px;}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.content,.left,.right {display:inline;overflow-x:hidden;}
.left {margin-right:-200px;}
*+html #middle {overflow-x:hidden;}/* for IE7 */
*html #header,*html #footer,*html #main {width:980px;}
*html .right {right:-580px;}
</style>
<![endif]-->

Правило помеченное для OPERA, решает проблему моего первого примера. Очевидно, что display:inline-block; все-таки строчный элемент и поэтому ведет себя соответственно. Для других браузеров не является обязательным.

Выделенное для IE7, позволяет зафиксировать правую колонку при резиновой области контета, на своем месте.

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

Сто процентная высота с включением header и footer описывалась не однократно, просто ищем, поиск по блогу работает :)

Но не все так гладко, как того бы хотелось :(

Резиновая область контента, накладывает определенные ограничения. Так, введение overflow-x:hidden; для колонок центральной части макета, перенос его из "условных комментариев", выделено синим в таблице стилей, приводит к странностям в FireFox.

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

Разумного объяснения не знаю, лучше overflow-x:hidden; не использовать, но в этом случае ширина блоков/графики внутри колонок, не должны превышать установленную для этих колонок ширину.

min/max-width настроен под ширину области контента. Размер оной приблизительно равен - 510px.

Обновленный пример находим по ссылке display_inline-block_border