browsers won't scroll to view off-screen elements

browser won't scroll even when elements are larger than window

[rimwalker]

I'm currently trying to code a page using CSS positioning. I have a <div> element that's relatively positioned, visible and is set to 400px in width and height set to auto.

Inside this block are nested divs that are also positioned relatively. Their heights and widths are all set to auto. They contain text. When viewed in either Netscape 7 or Explorer 6 with the browser windows set to full screen the page looks just fine. The various nested divs all align on top of each other vertically as planned and the outer div sits right where it should.

However, should I resize the browser window to something smaller than the content, the browsers’ scroll bars refuse to scroll the full height and length of the containing content. This will be a problem if someone with a small screen tries to view my content and are unable to scroll all the way.

What’s happening here, and how can I fix it? (As I mentioned this happens in both Explorer and Netscape.)

[rimwalker]

Ha. I just fixed it myself.

Just in case any of you wonder what it was:

I had set the outermost DIV to the position of "top: 45px" and "left: 0px". The browsers were calculating the space occupied by the content and then scrolling to that exact amount, without taking into consideration the off-set due to positioning.

So to fix it I set "top:" and "left:" to zero and gave the page's BODY tag the property of "margin-top: 45px" and "margin-left: 100px".

Now the browsers scroll all the way to the edges of the content.

[DrDoc]

Welcome to Webmaster World!

Glad you were able to solve the problem. :)

[rimwalker]

Thanks. Me too. ;)