gordi

Возможно, это поможет - http://trifler.ru/blog/i/border/border_double_01.htm

C не большой правкой, возможно подойдет- http://trifler.ru/blog/i/menus/blognanomenu/blognanobcb.htm

Может это поможет - http://trifler.ru/blog/i/layouts/float/porno_01.htm

Читаем раздел - http://csslayout.ru/layout/float/float.htm

Выбираем нужное из примеров.

Здесь много примеров http://csslayout.ru/

Попробуйте так - http://trifler.ru/blog/post_1258565552.html

Если для левой колонки не принципиально иметь плавающую ширину и не нужен footer

то можно и так http://csslayout.ru/i/layout/absolute/absolutelc_hh.html

Наверно так - http://csslayout.ru/i/layout/floatmp/lcr_shablon_07.html

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

Так сделано специально, все разбито на секции комментариями и комментариями помечено, что за что отвечает.

Ну если 10 блоков

Тогда сюда - http://csslayout.ru/layout/float/float6.htm

Пример "Идеальный Float - бонус"

Под 2 колоночный допилите.

margin-bottom:-32600px;
padding-bottom:32600px;

Данные стилевые правила создают иллюзию равной высоты колонок.

Разберите пример - http://csslayout.ru/i/layout/floatmp/cr_shablon_01.html

Должно помочь

Какие есть еще варианты кроме fixed ?

Читаем раздел http://trifler.ru/fixfixed.htm

Смотрим примеры.

Здесь много примеров разметки подобного класса - http://trifler.ru/grailexamples.htm

Можно и так http://trifler.ru/i/grail/grailgordi/grailgordilcr.html

Можно выбрать здесь - http://trifler.ru/layoutexamplesfix.htm

Стандартная эмуляция колонок равной высоты

Смотрим и выбираем

1. http://trifler.ru/layout.htm

2. http://trifler.ru/grail.htm

По ссылка в указанных разделах есть страницы с примерами.

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

Но часто все сводится только к ширине, а это совершенно не учитывает соотношение высота/ширина.

Скажем, коэффициент разрешения 1024*768 составляет 1.33, а 1280*800 1.6 и как быть с этим?

Хотелось бы такого, но более простыми средствами - http://trifler.ru/i/layout/proportions/proportions_fontcg.html

Возможно, скрипт описанный в http://trifler.ru/proportions03.htm

может оказаться лучшим решением, но в любом случае не забываем,

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

учитывает только ширину,

о пропорциях ширина/высота говорить не приходится

Вы можете задавать высоту только

#middle {min-height:100%;}

а с блоками, которые находятся в этом контейнере этот номер не пройдет,

они тянуться не будут и никогда не станут равными по высоте.

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

Или делаете соответствующую графику для #middle, тогда все получится

А если использовать display:table, display:table-row, display:table-cell- как вариант ?

а как лекарство для IE-7

$(document).ready(function(){   
if ($.browser.msie && $.browser.version == 7)   {
     $(".tablecell").wrap("<td />");
     $(".tablerow").wrap("<tr />");
     $(".table").wrapInner("<table />");  
      }  
}); 

.table     { display: table; } 
.tablerow  { display: table-row; } 
.tablecell { display: table-cell; } 

Можно и так, но как тогда быть с "P.S. Табличную весртку не предлагать, JS тоже." из № 1

Вы можете задавать высоту только

#middle {min-height:100%;}

а с блоками, которые находятся в этом контейнере этот номер не пройдет,

они тянуться не будут и никогда не станут равными по высоте.

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

Или делаете соответствующую графику для #middle, тогда все получится

...Суть вопроса в другом:

Имеем контейнер высотой 100% в верх контейнера положили шапку вниз футер как в средину положить контейнер который займет оставшееся пространство.

Как сказано, именно зачистка и не даст растянуть на 100% высоту ваш макет.

Потому ищем другие решения, где зачистки float-блоков нет в принципе.

При использовании зачистки float контейнеров

#middle:after {
        content: '.';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
}

растянуть на сто процентную высоту не получится

100% высоту страницы можно получить используя

 margin-bottom:-32767px;padding-bottom:32766px;

Примеры - http://trifler.ru/layoutexamplesfix.htm

Как бы там ни было, для таблицы этот трюк может быть полезен, часто не имея возможности поменять класс в html, можно стилями при помощи добавки *+* к одноименному классу, оформление в одном из столбцов изменить

Сделал пример таблицей -

С <br> - http://trifler.ru/blog/i/hackcss/hackcss01.htm

Без него - http://trifler.ru/blog/i/hackcss/hackcss02.htm

Совсем все не понятно

Стоп, ошибся надо <br> после <body> ставить

Должно быть так

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>hackcss</title>
<style type="text/css">
* {margin:0;padding:0;}
.hackcss {border:#00a 1px solid;color:#00a;margin:10px auto;padding:7px;width:400px;}
*+*.hackcss {border:#a00 1px solid;color:#a00;font:bold 12px arial;}
</style>
</head>
<body>
<br>
<div class="hackcss">
<p>Google Crome, FireFox, OPERA, IE7(8)</p>
<p>.hackcss {border:#00a 1px solid;color:#00a;}</p>
</div>

<div class="hackcss">
<p>Google Crome, FireFox, OPERA, IE7(8)</p>
<p>*~*.hackcss {border:#a00 1px solid;color:#a00;}</p>
<p>*+*.hackcss {border:#a00 1px solid;color:#a00;}</p>
</div>
</body>
</html>

И все блоки будут оформлены по последней строке стилей.

Поэтому вопрос остается прежним. Почему добавление <br> меняет оформление блоков?

Хочу сказать ответа не знаю, потому и тему завел.