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

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

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

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

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

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

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

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

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

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

Гениально.

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

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

<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, сам блок растягивается до правого края браузера и то, что в него не влезло, обрезается. Горизонтальной прокрутки у браузера не появляется но и симметрия пропадает.