Déplacement d'éléments dans un div avec débordement automatique

Question

Je rencontre un problème avec la disposition d'une page où mes contrôles changent lorsque j'essaie de changer de classe à l'aide d'un événement javascript. Quelqu'un peut-il aider avec quelques idées autour du problème. Cela semble seulement être un problème dans IE quand la barre de défilement gauche apparaît.

Voici un exemple du html

<div id="container" style="overflow:auto;"> 
    <div id="control1Container" style="left:17%;top:145px;display:inline;position:absolute;"> 
    <div id="control1" class="listOUT" >I am a control</div> 
    </div> 
    <div id="control2Container" style="left:67%;top:145px;display:inline;position:absolute;"> 
    <div id="control2" class="listOUT" >I am a control</div> 
    </div><!-- more controls here --> 
</div> 

Alors maintenant imaginer que les contrôles dans le conteneur div prennent suffisamment d'espace que la marge de dépassement apparaît sur la gauche-à-dire les contrôles s'étendent en dessous du bas de la conteneur div. Si je tente de changer la classe listOUT sur control1 pour dire listIN en utilisant javascript, le contrôle se déplacera vers la gauche. Pour moi, il semble presque que le navigateur réajuste le control1Container à un nouvel emplacement qui est de 17% si la div nouvelle du conteneur avec la barre de défilement en place.

Une idée est?

Answer 1

Vous devez donner au conteneur div position:relative, de sorte que les éléments positionnés à l'intérieur absolus, il se positionner par rapport à elle ..