Relatywne divy

Chciałbym uzyskać efekt jak na stronie http://www.openstreetmap.org. Po kliknięciu w którąś z kontrolek po prawej, pojawia sie panel, a kontrolki trzymaja sie jego lewej strony.
Struktura tego htmla mniej wiecej wyglada tak:

<div id="content">
   <div id="map-ui">panel boczny</div> 
   <div id="map">mapa
      <div class="control-container">
         <div>div z kontrolkami</div>
      </div>
   </div>
</div>

Zależy mi na tym by było jak na tej stronie - wyjeżdza panel, mapa zostaje bez zmian, nie przesuwa się, ani nic z tych rzeczy.
Czy mógłby mnie ktoś naprowadzić jak to uzyskać? Może nie zauważam jakichś specjalnych sztuczek? :)

Nie jestem specjalistą w CSSach więc proszę o wyrozumiałość jeśli plote głupoty.

Mój fiddle:
http://jsfiddle.net/L49Jv/2/

http://jsfiddle.net/L49Jv/4/

dodalem lewy div do tego twojego fiddla

ogolnie position fixed i z -index wiekszy niz ma mapa. teraz tylko dodaj sobie jquery i poczytaj jak po kliknieciu w przycisk pokazywac i ukrywac elementy uzywajac fadeIn i fadeOut onlick efekt fade in fade out

Niestety nie do końca tak jakbym chciał żeby mi działało. Przykryło kontrolke +/-, zamiast ją przesunąć. Będę musiał chyba pomodzić coś ze stylami kontrolek.
Dzięki za pomoc :)

Przykrylo, bo nie umiescisz nic w divie ktory jest genrowany przez javascript,

od biedy mozesz nadpisac style dla kontrolek +/- i przesunac je na prawo

wiec gdybym chcial zeby pojawiający się panel boczny przesuwał kontrolke - musze umiescic je w jednym divie rodzicu?

ale wtedy musialbys usunac zmienic position absolute na relative, a wstrzyknac moizesz tak:

http://jsfiddle.net/L49Jv/18/

O super o coś takiego mi chodzi wiec bede tak probowac.
Ostatnia rzecz, da sie przechwycic eventy z tego pojawiającego się diva? bo w tej chwili mogę po nim jeździć i mape przesuwac?

strasznie mieszasz tak dokladajac po kawalku co chcesz. teraz to najlepszym wyjsciem bedzie po prostu umiescic panel menu OBOK panelu mapu, a przyciski plus minus zostana na mapie z prawej strony menu. zadnego wstrzykiwania i kombinoawnia.

Więc sktukrura tak żeby wszysko działało wygłada tak jak ponizej?

<div id="content">
	<div id="#panelboczny">
        Tu umiescic kontrolki
        </div>
	<div id="#mapa"></div>
</div>

Coś takiego? Jeśli nie to prosiłbym o fiddlea, ostatni raz :)
Nie chciałbym tego zrobić tak żeby zadziałało a później mieć trudnosci w dodawaniu czegokolwiek bo źle zrobie :)

http://jsfiddle.net/L49Jv/24/

tylko wyskaluj dobrze mame i zresetuj floaty za mapa. jak?? to juz ggole ci powie.

Tak probowalem wczesniej ale zaczelo mi przesuwac diva z mapa czego nie chcialem. Skalowanie mapy takze chyba sprawi ze mi sie zmieni widok na niej. Bede coś modzić, dzieki za pomoc :)

ale na tym twoim przykladzie z openstreetmap oni tez przesuwaja mape. nawet dosyc nieudonie bo wystarczy ze nacisniesz export potem krzyzyk potem export i tak kilka razy i mapa wyjdzie poza ekran. tam sa dwa typy divow. te dlugie ktore sa z position:relative i one pchaja mape na bok i ten krotki z position:aboslute nalozony na mape. wiec zajrzyj tez do ich kodu, popraw co zrobili zle i bedziesz mial.

A tak, jak się nacisnie export to tak przesuwa. Wcześniej miałem na myśli kontrolki z prawej które rozwijają panel po prawej bez przesunięcia mapy.