Positionnement relatif à <div>

Bonjour,

Tout d'abord, merci pour votre site qui m'a permis d'apprendre enormément de choses.

D'habitude, à force de chercher, j'arrive à trouver la solution, mais là, je bloque.

Donc, j'essaye depuis plusieurs jours de faire une chose qui m'a l'air assez simple, mais pourtant....

Je vais tenter d'expliquer.

J'ai plusieurs div comme ceci les unes en dessous des autres:

<div style="position: absolute; top: 360px; left: 10px; z-index:2;">
<div id="grayBG" class="grayBox" style="display:none;"></div> 
<div id="LightBox4" class="box_content" style="display:none;"> 
<table cellpadding="3" cellspacing="0" border="0"> 
  <tr align="left"> 
    <td colspan="2" bgcolor="#FFFFFF" style="padding:10px;"><div onclick="displayHideBox('4'); return false;" style="cursor:pointer;" align="right">X</div><p><!-- Box content -->4Text of the box!!!</p></td> 
  </tr> 
</table> 
</div> 
<a href="#" onclick="displayHideBox('4'); return false;">4Open Box</a>
</div>

Je fais appel à un script qui m'affiche une petite boite avec effet lightbox

<script type="text/javascript" language="javascript">
function displayHideBox(boxNumber) 
{ 
    if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
        document.getElementById("LightBox"+boxNumber).style.display="block";
        document.getElementById("grayBG").style.display="block"; 
    } else { 
        document.getElementById("LightBox"+boxNumber).style.display="none";
        document.getElementById("grayBG").style.display="none"; 
    } 
} 
</script> 

Tout ceci marche bien.
Ce que j'essaye de faire c'est que cette petite boite s'affiche a droite de chaque div qui l'appelle.

Mon CSS :

.box_content { 
    position: relative; 
    top: 0px; 
    left: 300px; 
    width: 500px; 
    padding: 16px; 
    z-index:100112; 
    overflow: auto; 
} 

Ca marche à une exception près, lorsque ma boite s'affiche à droite de mon div, mon div descend...

J'espère que c'est clair, ce n'est pas facile à expliquer.
Merci d'avance pour votre aide.