Нет, беспросветна эта тьма,
   Сбежали из шестой палаты...
   И сводят дружно WEB с ума,
   Маржины, падинги, флоаты.
   Зверинец браузеров - психов,
   По сути дела, та же масть...
   Ох, не будите братцы лихо,
   Легко в том омуте пропасть ;)
Gordi

Продолжим тему если не новой, то уж точно мало известной и недостаточно популярной техники создания колонок равной высоты.

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

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

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

Посмотрим пару скриншотов:

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

Второй, тема сегодняшнего поста.

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

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

Кратко, о том, в чем же смысл предлагаемого.

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

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

В контейнерах с классами, находится информация и блоки с ней с помощью float и относительного позиционирования размещаются там, где необходимо.

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

Ссылки на примеры чуть ниже, но без разночтений при просмотре в различных браузерах, не обошлось.

При использовании данной техники придания иллюзии равной высоты колонкам макета, лучше всех ведут себя, вы будете удивлены – IE6(7).

Все пять вариантов работают в них отлично, как хорошие швейцарские часы.

В группу риска, как всегда попала "северная ведьма", иначе "норвежская красавица" :)

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

Примеры по скриншоту номер один:

• left-content
• left-content-right
• left-right-content
• content-left-right
• content-right

Примеры по скриншоту номер два:

• left-content
• left-content-right
• left-right-content
• content-left-right
• content-right