Question

I have a page that is basically this:

<div id="thelist" style="height:100%; width:100%"></div>

<script type="text/javascript">
  $('#thelist').load('other.aspx', function () { });
</script>

the problem that I’m running into is that other.aspx has a lot of controls on it that contain absolute positioning, which I was to be absolute, but with respect to the div and not to the page. The controls are generated dynamically so they may be added in a different order than they will appear on the screen. Iframes are out of the question because the iPad does not allow you to scroll iframes. Basically what I need is a way to anchor the absolute positioning to the div instead of the entire page. Any help is appreciated. Thanks.

Answer 1

When you give a containing element “position: relative”, then absolutely-positioned elements inside it use that container as the reference point. So, inside it the position “top: 0; left: 0” is the upper left corner of the container, not the whole window.