Три колонки, крайние тянутся, центральная фиксированной ширины.

[mozart]

По сути ситуация такая: весь контент находится в центральной части дизайна, в блоке шириной 954 пиксела, по бокам идет как бы декоративный фон, состоящий из нескольких элементов, то есть необходимо к центральному диву (трехколоночной таблицей не получается, т.к. образуется вертикальное смещение и дырки на стыках колонок), добавить еще два дива побокам, которые равномерно растягиваются при увеличении размера окна браузера, и в них разместить еще дивы следующим образом: в левой два дива фиксированной высоты, а в правой четыре - верхние два фиксированной высоты, третий тянется, нижний снова фиксированной высоты. При этом всем центральный див обязательно должен быть по центру. КАТАСТРОФА!!!

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

Ко всему прочему параметр height дышит тока пикселами (height:100% - не работает ни в одно браузере ни с каким доктайпом), min- и max-width вообще не пашут..

Ниже код наиболее удачной верстки, мож нада просто внести в нее изменения?

<div id="center">

<div id="left">
 <div id="left_top"><img src..></div>
 <div id="desk_shad"><img src..></div>
</div>

<div id="main">
<table><tr><td></td></tr></table>
</div>

<div id="right">
 <div id="right_top"><img src..></div>
 <div id="desk_shad"><img src..></div>
 <div id="list_shad"><img src..></div>
 <div id="list_end_shad"><img src..></div>
</div>

<center><div id="hand"><img src..></div></center>

</div>

#center {width:1280px; margin:0 auto;}
#left {float:left; width:163px; (+хотелось бы height:100% - но не работает..)}
#left_top {height:1011px; width:163px;}
#desk_shad {width:163px; height:115px;}
#main {float:left; width:954px;}
#main table {width:100%; height:1227px; border-collapse:collapse;}
#right {float:left; width:163px; (+просто необходим height:100% - но не работает..)}
#right_top {height:1011px; width:163px;}
#list_shad {width:163px; background:url(...) left repeat-y; должен тянуться до следующего дива и прижимать его к низу;}
#list_end_shad {height:60px; width:163px;}
#hand {height:102px; width:260px;}

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

У кого нибудь есть предложения как сие отцентрировать и заставить хотябы правую колонку тянуться до низа экрана?

[Vlad]

Используй <div style="clear: both"></div> или фон к BODY добавляй.

[mozart]

Используй <div style="clear: both"></div> или фон к BODY добавляй.

В body уже есть фон, во вторых clear:both не решает основной задачи. Ко всему прочему проблема с вісотой остается без решения...

[Vlad]

Над body есть еще html, к нему можно фон прикрутить.

[mozart]

В принцыпе первые три уровня фона сделать таким образом мона, но проблема вовсе не в этом. Весь гвоздь программы - разница в количестве уровней фона справа и слева от основного окна. Слева мы имеем три уровня фона, а справа - пять, причем один из этих пяти уровней должен тянутся от и до опрделенного момента. Последние два уровня полупрозрачные (тень), поэтому вариант с наложением одного фона на другой не подходит..

Edited October 10, 2008 by mozart

[mozart]

Над body есть еще html, к нему можно фон прикрутить.

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

Сорри за лишний пост, Опера со своим способом кеширование не показала предыдущий ответ..

Edited October 10, 2008 by mozart

[Azadi]

С картинками можно? Очень сложно представить все ваши уровни фона и что куда должно тянуться. При этом пример кода мало что дает. А вообще абсолютное позиционирование должно решить большинство ваших проблем.

[mozart]

С картинками можно? Очень сложно представить все ваши уровни фона и что куда должно тянуться. При этом пример кода мало что дает. А вообще абсолютное позиционирование должно решить большинство ваших проблем.

Обьясню на примере таблицы:

<table><tbody><tr>
 <td><!--left-->
  <div>left1</div>
  <div>left2</div>
  <div>left3</div>
 </td>
 <td width="800">content</td>
 <td><!--right-->
  <div>right1</div>
  <div>right2</div>
  <div>right3</div>
  <div>right4</div>
  <div>right5</div>
 </td>
</tr></tbody></table>

Так вот: колонки left и right должны тянуться по ширине в зависимости от ширины окна браузера, при этом content должен оставться в центре окна браузера. left1=right1, left2=right2, left3=right3 - одинаковые уровни фона с фиксированной высотой. right4 должен тянуться по высоте от right3 и припирать right5 к низу.