Witam

Nie potrafiłem jednoznacznie podać tematu, więc opowiem co powoduje moje pytanie tutaj. Mam taką strukturę HTML:

[HTML] pobierz, plaintext 
<div id="container">
	<div id="carousel-arrows">
		<div id="carousel-left">
			...
		</div>
 
		<div id="carousel-right">
			...
		</div>
	</div>
 
 
	<ul>
		<li></li>...
	</ul>
</div>
[HTML] pobierz, plaintext 

I taki CSS:

[HTML] pobierz, plaintext 
#carousel-left {
    width: 366px;
    height: 500px;
    position: relative;
    z-index: 300;
    float: right;
    left: -732px;
}
 
#carousel-right {
    width: 366px;
    height: 500px;
    position: relative;
    z-index: 300;
    float: right;
    left: 366px;
}
[HTML] pobierz, plaintext 

Podpięta jest pod to jQuery carousel, któa dla każdego elementu li robi float:left - działa ok (podzieliłem container, żeby wyświetlały się 3 elementy li). Ale teraz muszę nałożyć diva (carousel left lub right ) na 1 i ostatni z tych elementów, coś takiego:



Pod firefox działa bardzo fajnie, ale pod chrome, IE i opera przeskakuje jakby niżej:



Jak to dobrze ustawić?

Po dodatkowym teście dla ul zrobiłem position: relative i top: -500px i "wskoczyło" wyżej, ale jednocześnie zepsuło na FF.

Jest jakieś uniwerslane rozwiązanie?