asked on

CSS Background Image float problems

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.

Thanks.

ASKER CERTIFIED SOLUTION

Kim Walker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Arnold Layne

ASKER

My main content is 1050px wide with a margin 0 auto for centering. Set the min width to 1070px and it works perfectly. Strangely enough, it even took care of the little bit of padding that I wanted on the left side when the window is small.

Thanks.