If you take a look at the page above you’ll see that the 1010px wide image sits 15% from the left of its container div. If the page width is less than this no scroll bars appear – and this is what I want.
However, if you narrow the browser window to less than the box under the word “TEST”, then scroll right, you’ll see that the upper background image doesn’t continue
After much experimentation and hunting around for an answer, I’m hoping one of you might throw some light on the problem
I just feel that I’ve gone about this all wrong
I feel you may have also, but given the information you’ve shared a solution is to place min-width: 700px on the body
The div being cut off has a width of auto which defaults to 100% of the body (minus margin, border, and padding). The body is viewport width, so when the viewport is smaller than 700px (the width of the lower div), the div in question also is smaller – including its background, even when scrolled.
Do you have a better example of what you’re trying to accomplish? Why is the banner 15% from the left and the rest of the content centered? Perhaps what you have actually is the best way, but it just seems a bit odd (realizing of course that you’re page is just a testbed).