Background-image not repeating correctly

My header, nav, and footer are extending correctly out to the right, but if you were to make your web browser very skinny they start to subtract…

Kind of hard to explain sorry.

http://designingyours.com/cater/index.html

Hi,
Your Content div has a total width of 1020px when you add the width, margin, and padding of it’s two child divs (#text & #slideshow)

Your #wrapper and #footer are set at 100% widths and that is only pertains to the space that is visible in the viewport at any given instance. When the viewport gets below 1020px and is scrolled it clips off the backgrounds of #wrapper and #footer.

The fix for that is to set a min-width on them, this should work:

#wrapper {
height:100%;
margin:0 auto -60px;
min-height:100%;
[B]min-width:1020px;[/B] [COLOR=Blue]/*stop BG from clipping [COLOR=DarkGreen](and float drop in #content)[/COLOR]*/[/COLOR]
}

#footer {
background-image:url("site_images/grad_bot.gif");
background-repeat:repeat-x;
border-top:2px solid #96CFBF;
float:left;
height:58px;
width:100%;
[B]min-width:1020px;[/B] [COLOR=Blue]/*stop BG from clipping*/[/COLOR]
}

@Rayszur

Wow thanks a lot, I wasn’t aware that widths of child divs affect the width of the parent div, still learning!

Thanks again