Вот ещё один двухколоночный макет.

Для #sidebar и #content задаются float: left;, position: relative; и устанавливается относительная ширина.

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

У контейнеров указано то же значение float, что у колонок. Им же задан фоновый цвет для основных колонок.

Вложенный div по порядку наложения выше, чем внешний. Мы сдвигаем внутренний div так, чтобы он показывался только там, где мы хотим отображать боковую панель (right: 75%;). Это позволит фону внешнего div проступать там, где мы хотим показать колонку с контентом.

Позиционируем внутреннюю колонку, установив значение right на 75% (точней, на такое же, как ширина колонки с контентом).

Содержимое обоих колонок также сдвинется на 75% влево, мы возвращаем их на место, сказав left: 75%;

Недостаток метода, пожалуй, лишь в том, что два внешних div'а не семантичны, а служат только для оформления. Ну и при попытке растянуть вертикальный размер с помощью min-height, как в примерах 1 и 2, всё заполнится фоном container-outer. Правда, указать минимальный вертикальный размер в пикселях для container-inner - не проблема, что и сделано в шаблоне.