100% width division cut-off

Question

I have a number of width: 100%; divisions as part of my HTML page, however when I zoom in on the page or view on a low resolutions such that some of the content goes past the horizontal limit of the screen (and hence a horizontal scrollbar appears), I find that scrolling to the right results in my 100% width division cutting off.

This effect is demonstrated below:

Answer 1

The same happens with this web page, here on Stack Overflow. If you zoom in using FF5.0, the footer and headers are "cut" when you scroll right. This is because the content div has to overflow on the right.

I think you want to avoid having overflows on the side (it's not aesthetically pleasing, and it's harder to navigate through the page).

A solution could be to not have divs that have a minimal width (eg 960px for the div#content of this web page), but rather are variable (50%). If you zoom in, width=50% will stay 50%, it will not overflow.

PS: but it might be better to have some JavaScript code to do the zoom for you, so that you can more or less control what the end-user sees when they click on the zoom button that you'd provide, on the page.