Forum PHP.pl

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 

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 

Generalnie chodzi mi o to jak ustawić elementy podrzędne obok siebie. Przy takim ustawieniu css(jak napisałem) float:left nie działa. Nie chciałbym ustawiać pozycji poprzez top: Left:

W takim razie po co ci pozycja absolutna? Jej używa się tylko w niektórych przypadkach. Spytałeś również o przesuwanie elementów po kliknięciu, więc napisałem wyżej.
Możesz spróbować z display:inline