Верстка div-ами и обрезание браузером

[Infinion]

Здравствуйте, коллеги!

Подскажите пожалуйста по верстке, никак не могу сообразить.
Нужно сделать так:

Имеется основное тело сайта шириной 960 пикселей и внутри размещаются все важные элементы - текст, картинки, кнопки и т.д. и т.п. С двух сторон от этого контейнера имеются две полоски-контейнера по 150 пикселей шириной каждая, внутри которых размещается графика, разные картинки-элементы дизайна.
Необходимо сделать так, чтобы при маленьком разрешении экрана (1024х768) - эти две полоски с графикой по бокам основного тела сайта - обрезались браузером БЕЗ появления полосы горизонтальной прокрутки. И по центру экрана оставалось бы видным только тело сайта.(При разрешении экрана 1280х1024 и выше - эти полоски по бокам будут соответственно видны.)

Все это нужно сверстать дивами, без таблиц.

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

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

Кто сможет, подскажите, пожалуйста! Заранее благодарен!

 

[danpro]

а если эти картинки установить фоном без прокрутки? или я не правильно понял?

 

[Infinion]

Фон без прокрутки не подходит - эти картинки должны двигаться вместе с основным телом сайта.

Уже второй день бьюсь, никак не могу понять, как сделать

Вот, например, как сделано вот на этом сайте

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Там по бокам шапки и футера есть графика, которая является продолжением дизайна основного тела сайта, и она обрезается при ресайзе окна браузера без появления прокрутки, но основное тело сайта не обрезается и появляется прокрутка.

Вот мне примерно такое надо, только там это сделано таблицами, а мне нужно дивами.

 

[compz]

по идее можно боковые дивы тянуть на 100% и картинки в них ставить фотом

 

[Infinion]

Не могу представить, как тянуть боковые дивы на 100%, чтобы они при этом были по бокам центрального дива с фиксированной шириной.

P.S. Кому не лень, гляньте, пожалуйста, простой пример, который я сверстал (в архиве, во вложении в первом посте) - почему-то там левая часть обрезается, как надо, а правая - не обрезается, хотя сделана идентично с левой частью. Что не так я делаю?

 

[Andy_ham]

Я, конечно, такие вещи верстаю таблицей - ибо проще и все работает
По теме - есть такая идея. Для body делаем 6 вложенных дивов и каждому в css бекграундом делаем нужную картинку. Писать полный код лень , да и нет смысла

<div id="1">
 <div id="2">
  <div id="3">
   <div id="4">
    <div id="5">
     <div id="6">
      <div с центральным блоком сайта></div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

Такое я уже делал, все работает, но 6 бесполезных дивов ничем не лучше 1 простенькой таблицы, ИМХО

 

[Infinion]

В общем, проблему решил я сам по-другому:

Эти картинки я попарно соединил в одну gif картинку (из 2 картинок сделал 1, таким образом получилось 3 картинки для 6) с прозрачным бекграундом и нужного размера, из расчета, что когда эта картинка будет размещена по центру - эти картинки по бокам займут нужное положение. (Т.е. по сути эти картинки разнесены по сторонам и между ними пустое место равное ширине основного тела сайта).
Все это дело запихивается бэкграундом в 3 отдельных дива с width:100% и фиксированной высотой в пикселях(для каждой картинки свой), выравнивается по центру, помещается на нижний слой и регулируется положение отступом от верха сайта.

И все отлично работает. Все очень просто. Вес картинок не изменился из-за добавления пустого места.

 

[mittus]

Так вообще одной обойтись можно, ну или 3-мя и без пропуска. Склеиваешь все в одну, без отступов. Ну или как у тебя сделано, только тоже без отступа и..
Вариант 1 (склейка в 1

<div id="1">
 <div id="2">
      <div с центральным блоком сайта></div>
 </div>
</div>
<style>
#1 { width:100%; background:url('http://site.ru/1.png')no-repeat left top;}
#2 { width:100%; background:url('http://site.ru/1.png')no-repeat right top;}
</style>

Вариант 2 (склейка в 3 изображения

<div id="1">
 <div id="2">
  <div id="3">
   <div id="4">
    <div id="5">
     <div id="6">
      <div с центральным блоком сайта></div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
<style>
#1 { width:100%; background:url('http://site.ru/1.png')no-repeat left top;}
#2 { width:100%; background:url('http://site.ru/1.png')no-repeat right top;}
#3 { width:100%; background:url('http://site.ru/2.png')no-repeat left 150px;}
#4 { width:100%; background:url('http://site.ru/2.png')no-repeat right 150px;}
#5 { width:100%; background:url('http://site.ru/3.png')no-repeat left 300px;}
#6 { width:100%; background:url('http://site.ru/3.png')no-repeat right 300px;}
</style>