[CSS][JavaScript] Przesuwanie elementów po kliknięciu Opcje

[michau85]

Witajcie.
Mam coś takiego:

[HTML] pobierz, plaintext 
 
<style>
#nadrzędny{
width:100px;
height:100px;
position:relative;
overflow:hidden;
}
 
.podrzedny{
width:100px;
height:100px;
position:absolute;
float: left;
}
 
 
 
</style>
 
<div id="nadrzedny">
   <div class="podrzedny">Pierwszy </div>
   <div class="podrzedny">Drugi </div>
    <div class="podrzedny">Trzeci </div>
 
 
</div>
 
Chciałbym po kliknięciu przycisku przesuwać wszystkie podrzędne elementy np. o 100px w lewo. (w jquery chiałbym zrobić efekt stosu) Wszystko jest dobrze jeśli element nadrzędny 
ma taką szerokość jak suma elementów podrzędnych czyli 300px. Ja natomiast chciałbym aby element nadrzędny miał tyle co podrzędny czyli 100px. Chciałbym też żeby elementy
 podrzędne ustawione były obok siebie bez "ręcznego" ustawiania pozycji (czyli bez top , left). Dlatego użyłem float:left  Problem jednak w tym że przy pozycjonowaniu relative-aboslute
 float nie działa To powoduje że divy podrzędne ustawiają się jeden pod drugim zamiast obok siebie 
Rozwiązałbym problem ustawiając pozycję każdego podrzędnego diva "ręcznie", ale takie rozwiązanie nie do końca mnie zadowala. Proszę o jakieś podpowiedzi. I z góry dziękuję za pomoc
 
[HTML] pobierz, plaintext 

[Turson]

Ciężko zrozumieć o co kaman.

Pobaw się

[HTML] pobierz, plaintext 
<div id="nadrzedny">
	<div class="podrzedny">Pierwszy </div>
	<div class="podrzedny">Drugi </div>
	<div class="podrzedny">Trzeci </div>
</div>
<button onclick="przesun()">Przesun</button>
 
<script>
function przesun(){
	$('.podrzedny').css('margin-left', '100px');
}
</script>
[HTML] pobierz, plaintext