I have content arranged thusly:
<div id="thumbnails" style="width: 40px; overflow: auto;">
<div style="float:left; width: 20px;">content</div>
<div style="float:left; width: 20px;">content</div>
<div style="float:left; width: 20px;">content</div>
<div style="float:left; width: 20px;">content</div>
<div style="float:left; width: 20px;">content</div>
<div style="float:left; width: 20px;">content</div>
In IE7 this shows up with the content running out of the scrollable box. The answer everywhere is to make #thumbnails position:relative. My problem is that the items in #thumbnails are scriptaculous draggables that drag outside of thumbnails with a ghost of the element that is positioned absolutely. This does not go over well if the parent is positioned:relatively because now the absolute positions are relative to #thumbnails and not the <body>. Does anyone know an alternative solution to the IE7 bug?