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.

Who is Participating?
Kim WalkerConnect With a Mentor Web 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.
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.