Scroll

[Leniwiec]

Mam taki problem i zastanawiałem się czy ktoś mógłby mi pomóc. Być może jest on dla niektórych trywialny lecz mnie przyprawia o nerwowe konwulsje.

Moja strona wygląda tak:

Kod: Zaznacz cały

      <div id="warstwa1">
           <div id="obrazek1">
                <img src="obrazek1.png">
           </div>
           <div id="obrazek2">
                <img src="obrazek2.png">
           </div>
           <div id="okienko">
                <center><img src="okienko.png"></center>
           </div>
      </div>

Divy obrazek1,obrazek2,okienko są tej samej wielkości 1000x750 i są one na siebie nałożone. Div warstwa1 ma maksymalną dostępną szerokość i wysokość. Służy to wszystko temu żeby elementy należące do warstwy1 przy zmianie rozdzielczości/rozmiaru okna zostawały na środku strony (są relative i marginy są na auto). I tutaj pojawia się mój problem:
Chcę żeby kiedy część o wymiarach 1000x700 z warstwy1 (czyli prawie cały obrazek) wyjdzie poza ekran, żeby pojawił się scroll i można było zobaczyć obszar 1000x700 z obrazka scrollując.

Czyli łopatologicznie:
http://img87.imageshack.us/img87/9514/stronat.jpg

Czerwony obrazek zawarty jest w divach i jest złożony z 3 zawartych w divie WARSTWA1. Porusza się on swobodnie od boku strony do środka w czasie skalowania okna. Chodzi mi o to, żeby ZAWSZE można było zobaczyć zieloną część obrazka (jak okno jest za małe - scrollując).

Z góry dziękuję za wszelkie rady.

PS. Próbowałem to już wszystko wsadzić w diva o wymiarach 1000x700 i to wszystko w diva o wymiarach na auto i overflow:auto ale nic to nie dało.

PS2. Jeszcze krócej: jeżeli obszar strony będzie mniejszy niż 1000x700 to chcę mieć możliwość scrollując zobaczyć obszar o wymiarach 1000x700.