AgRy Сообщение 05/08/2008 09:57 Копия темы
Помогите с резиновым макетом или предложите плз свой вариант .
Итак, описываю трабл: нужно сверстать резиновый каркас div'ами (шапка, три колонки и футер = 5 блоков + остальные, но они накладываются с абсолютным позиционированием). Использую такую схему:
HTML:

<div id="header">Шапка</div>
<div id="container">
<div id="left">Левая колонка</div>
<div id="content">Контент</div>
</div>
<div id="right"> Правая колонка</div>
<div id="footer">Футер</div>

Соответственно добиваемся эфффета, чтобы все встало на свое место засчет отрицательных полей:
CSS:

#header {background:#51CAC8;}
#container {float:left; width:100%; margin:0 -170px 0px 0;}
#left {float:left; width:170px; background:#E73D00;}
#content {margin:0 150px 0 170px; background:#91CA00;}
#right {float:right; width:150px; background:#F5DC09;}
#footer {clear:both; background:#DDDEDF;}

+ в отдельном файле удовлетворяем гребанный IE:

* HTML #left {width:170px; w\idth:150px; }
* HTML #right {width:150px; w\idth:130px; }
#footer { height:1%; /* Немного уличной магии для IE5, неправильно считающего отступы */ }

Получается замечательная вещь, вроде все идеально во всех браузерах (как на картинке!). Если начать издеваться над браузерами, сворачивать их по горизонтали (с любой стороны), то правая колонка начинает вести себя неадекватно (после того как контент сжался до своего минимума) – в Oper'e она наплывает на контентную часть, в IE падает вниз. Как зафиксировать её? Или предложите более удобные варианты, которыми пользуетесь вы. заранее буду благодарен.
 

Boriss Сообщение 05/08/2008 10:04 Копия темы
.
Попробуйте минимальную ширину задать:

#container {
min-width: 1002px; /* Минимальная ширина контейнера */
width: expression(document.body.clientWidth > 1002 ? "100%" : "1002px") /* Ширина для IE6 */
}

AgRy Сообщение 05/08/2008 10:10 Копия темы
.
Не помогло. Результат все тот же.

stepdev Сообщение 05/08/2008 10:31 Копия темы
.
вааааау!!! есть несколько альтернативных вариантов, которые уже давно заточены и отлажены под это дело ;)

AgRy Сообщение 05/08/2008 10:57 Копия темы
.
Ну понятное дело, эт тока я дурак на своих ошибках учусь. Можно плз варианты в студию.

lord_deluxe Сообщение 05/08/2008 10:59 Копия темы
.
зачем отрицательные делать я так и не понял
.header {background:#51CAC8;}
.left { float:left; width:170px; background:#E73D00;}
.right {float: right; width:170px; background:#F5DC09;}
.content {margin: 0 170px; background:#91CA00;}
.footer{clear: both; background:#DDDEDF;}
a елементы нужно расположить вот так
<div class="header">Шапка</div>
<div class="left">Левая колонка</div>
<div class="right"> Правая колонка</div>
<div class="content">Контент</div>
<div class="footer">Футер</div>
вот и все, и не нужно никого удовлетворять :) обычная трехколоночная верстка, которая во всех браузерах одинаково работает

stepdev Сообщение 05/08/2008 12:59 Копия темы
.
webmascon, w3school, habrahabr, htmlbook и т.д. ;)

Kim_SPEC Сообщение 06/08/2008 13:17 Копия темы
.
Как это, должна появляться горизонтальная полоса прокрутки.

Вот пример который я использую для трехколоночной верстки, там content идет в коде первым, потом leftbar и rightbar