I doubt I'm the first person to run into this problem and I have heard of it before but I forget the answer
I have three divs that have to span the entire width of the page and I have no margins on the body. The divs are named top, middle, and bottom nav.
When the window is made smaller and horizontal scroll bars appear, if you scroll over to the far right, the background image no longer spans the width of the page and you see a white area, so the blue gradient background image is only the width of the reduced sized window, so scrolling shows that it no longer goes all the way to the right. This is happening with the top div and bottomNav div
Also, the left of the content of the top div and bottomNav div is right up against the left side. I would like it to be about 10 pixels away. You will see that the middle div is 10 pixels away because I applied left padding to it. But it stretches too far to the right. I would like all the content in all three divs to be 10 pixels away from the left side. I could add padding to the other two dives, but when viewed in full sized, the content is no longer centered. I am making heavy use of margin: 0 auto to accomplish this centering and surprising, padding seems to throw that off
A picture is worth a thousand words.
Here is the URL http://www.curriersystems.com/
The style sheet is at http://www.curriersystems.com/styles.css
Resize the window to see all of the little messes it seems to create, although most of the page actually still seems to maintain itself and it could be worse when dealing with many floats, but it still isn't right. I know it is due to the many floats I am using but I don't know exactly what to do about it. I know this is a classic problem with bg images and floats, so someone must have seen this same exact thing before.