Эта статья из A List Apart послужила большим источником вдохновения для меня. После «тест-драйва» указанного в ней метода, я решил применить отрицательные внешние полоски (negative margins) с точностью до наоборот.

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

• Ссылки в правой колонке не работают в Opera 6
• Возникают проблемы с прорисовкой фона в MSIE
• В разметке отсутствует структурный хак, который не позволяет очистить место после левой колонки в Netscape Navigator 6

Мой новый метод не использует:

• CSS хаки
• Структурные хаки для очистки плавающих элементов
• IE/Win условные комментарии
• Загадочные CSS правила
• Длинные таблицы стилей
• Надписи «Best viewed in...» (см. список поддерживаемых браузеров)

Эта страница показывает основную технику, но я создал «более сложный» проект, основанный на этом решении: это - вызов CSS.

Логика

Изображение ниже показывает, как работает макет. Я сдвигаю блок #container влево вместо правой стороны (противоположность тому что сделано в статье ALA), и самая важная часть - то, что я не делаю плавающим блок #sidebar.

Разметка HTML

[code]

[/code]

Я привожу здесь только стили относящиеся к разметке. Названия картинок и пути упрощены для наглядности.

Таблица стилей для современных браузеров (подключаем через @important):

CSS файлы

[code]

#outer_wrapper {

min-width:740px;

width:100%;

background:#fff url(left.gif) repeat-y left }

#wrapper {

background:url(right.gif) repeat-y right }

#header {

border:1px solid #b0b0b0;

background:#b0b0b0;

width:100%;

margin:0 -1px }

#container {

float:left;

width:100%;

display:inline;

margin-left:-200px }

#left {

float:left; width:150px;

display:inline;

margin-left:200px }

#main {

margin-left:350px }

#sidebar {

padding-left:100%;

margin-left:-200px }

#sidebar p {

position:relative }

#footer {

width:100%;

clear:both;

border-top:1px solid #b0b0b0;

border-bottom:1px solid #b0b0b0;

background:#b0b0b0}

.clearing {height:0;clear:both} [/code]

Источник/перевод статьи: http://www.tjkdesign.com/articles/3cols.asp