CSS i jQuery wariujące divy Opcje

[przemysuaw]

Chce stworzyć 4 divy - kwadrat 2x2 divy.

Wszystko wygląda pięknie, ale jak odpalam zdarzenie hover, które powinno lekko poruszyć konkretnego diva to tylko, lewy górny zachowuje się zgodnie z oczekiwaniami, pozostałe szaleją po ekranie.

CSS:

[PHP] pobierz, plaintext 
#zawartosc_index {
  margin-left:20%;
  position:absolute;
}
#ofirmie {
  position: relative;
  width: 300px;
  height:300px;
  border:20px solid white;
  background-color:#99CC00;
  color:white;
  float:left;
}
#panel_klienta {
  position: relative;
  border:20px solid white;
  width: 300px;
  height:300px;
  background-color:#33CCCC;
  float:right;
  color:white;
}
#oferta {
  position: relative;
  border:20px solid white;
  width: 300px;
  height:300px;
  background-color:#FF9900;
  float:left;
  color:white;
}
#kontakt {
  position: relative;
  border:20px solid white;
  width: 300px;
  height:300px;
  background-color:#CC99FF;
  float:left;
  color:white;
}
[PHP] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
<div id="zawartosc_index">
 
<div  id="ofirmie">
<h2 class="h2index">O firmie</h2>
</div>
 
<div  id="panel_klienta">
<h2 class="h2index">Panel Klienta</h2>
</div>
 
   <div style="clear:both;"></div>
 
<div  id="oferta">
<h2 class="h2index">Oferta</h2>
</div>
 
 
<div  id="kontakt">
<h2 class="h2index">Kontakt</h2>
</div>
 
</div>
[HTML] pobierz, plaintext 

i Jeszcze na koniec Jquery:

[PHP] pobierz, plaintext 
$(document).ready(function(){
// HOVER oferta 
   var topo = $('#oferta').position().top;
   var lefto = $('#oferta').position().left;
 
 $('#oferta').hover(function(){
  $(this).animate({top: $(this).position().top+10, left: $(this).position().left - 20},{duration: 200, queue: false});
   }, function(){
   $(this)
   .stop(true)
   .animate({top: topo, left: lefto},'fast');
   });
 
// HOVER O firmie 
   var topf = $('#ofirmie').position().top;
   var leftf = $('#ofirmie').position().left;
 
 $('#ofirmie').hover(function(){
  $(this).animate({top: $(this).position().top-10, left: $(this).position().left - 20},{duration: 200, queue: false});
   }, function(){
   $(this)
   .stop(true)
   .animate({top: topf, left: leftf},'fast');
   });
 
// HOVER panel klienta
   var topp = $('#panel_klienta').position().top;
   var leftp = $('#panel_klienta').position().left;
 
 $('#panel_klienta').hover(function(){
  $(this).animate({top: $(this).position().top-10, left: $(this).position().left - 30},{duration: 200, queue: false});
   }, function(){
   $(this)
   .stop(true)
   .animate({top: topp, left: leftp},'fast');
   });   
 
// HOVER kontakt
   var topk = $('#kontakt').position().top;
   var leftk = $('#kontakt').position().left;
 
 $('#kontakt').hover(function(){
  $(this).animate({top: $(this).position().top+10, left: $(this).position().left + 30},{duration: 200, queue: false});
   }, function(){
   $(this)
   .stop(true)
   .animate({top: topk, left: leftk},'fast');
   });
});
[PHP] pobierz, plaintext