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.
LVL 9
BobHavertyComhAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kim WalkerWeb Programmer/TechnicianCommented:
The issue is that the 100% width div is 100% of its parent which is the body element. When the window width is decreased, the body element width is also reduced so the 100% div is reduced with its parent.

What I usually do in this case is to set a min-width on the same 100% div. In this case the min-width would be equal to the widest element you want it to cover.

The issue with padding is how it interferes with 100% width. Padding is always in addition to width, so 100% + padding usually does not produce the desired result.

You can overcome the interference by simply inserting another div between the 100% div and its current contents and apply the padding to it. It doesn't need any other style parameters other than the padding.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BobHavertyComhAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.