Выезжание таблицы из под ниоткуда.

[lancer]

Помогите определить, можно ли решить нижеследующую задачу.

Откройте приаттаченную картинку.

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

Проблема с тем, где прятать зеленый блок.

1.Если бы песочный блок по высоте был больше или равен зеленому, то задача решилась бы при помощи z-index и расположения зеленого блока под песочным.

2.На картинке песочный блок меньше зеленого, но можно всю верхнюю часть до красной линии положить в див, а зеленый, как и в предыдущем случае под него, только на этот раз зеленому задаем определнный отрицательный top, чтобы часть находилась за верхом экрана.

Увы, в моей ситуции ни первый, ни второй пункт не существуют:
1. Песочный блок меньше зеленого.
2. Фон может быть совершенно разным при каждом новом посещении страницы. Так что резать фон и песочный блок в один див не подходит.

Возможно ли решить задачу?

[Kolyaj]

По пунктирной линии размещаете контейнер, ставите ему свойства position: relative; overflow: hidden; и выезжающий блок помещаете в него.

[lancer]

Гениально.

[EugenyK]

Я решал несколько другую, но подобную задачу: внутри ограниченного по ширине блока, центрированного по ширине браузера, организовать прокрутку другого, более широкого блока.

Пытался сделать вот так:

<div style='overflow:hidden;width:848px'>
     <div id='items_row' style='width:1590px'> [содержимое блока] </div>
</div>

В FF и IE первый div нормально отображается по центру браузера, правильно обрезая содержимое div'а с id=''items_row'.

Если добавить #items_row { position:relative }, то IE игнорирует стиль первого блока и появляется горизонтальная прокрутка у браузера. Если же добавить #items_row { position:relative; overflow:hidden } (как посоветовал Kolyaj), то в IE у первого блока игнорируется ширина 848px, сам блок растягивается до правого края браузера и то, что в него не влезло, обрезается. Горизонтальной прокрутки у браузера не появляется но и симметрия пропадает.