Shifting elements in a div with overflow auto

Question

Hi,

I am experiencing problem with the layout of a page where my controls are shifting when I attempt to change the class using a javascript event. Can anyone help with some ideas around the problem. It only seems to be a problem in IE when the left scroll bar appears.

Here is an example of the 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>

So now the imagine that the controls within the container div take up enough space that the overflow margin appears on the left i.e. the controls extend below the bottom of the container div. If I attempt to change the listOUT class on control1 to say listIN using javascript the control will shift to the left. To me it almost seems like the browser is readjusting the control1Container to a new location that is 17% if the container div's new width with the scrollbar in place.

Any idea's?

Answer 1

You need to give to the container div position:relative, so that the absolute positioned elements inside it get positioned in relation to it ..