I have background images applied to two divs, header and footer which repeat-x to fill the whole width of the screen. The content in my layout is fixed width, at ~960px. My problem is that when I shrink the browser below 960px - which invokes a horizontal scrollbar - the header and footer divs are cut off as soon as I scroll to the right. They're obviously sizing themselves to 100% of the browser width, but don't adjust this when the browser is scrolled (over 100% I guess?). is there any workaround for this? Thanks for any help!
I would probably apply min-width to those elements so they too don't shrink below that 960px... (and the requisite expressions to fake min-width in IE6/earlier) usually when I write my sites I have an outer container called 'pageWrapper' or 'container' to which things like widths and centering can be applied. I usually even include it on fully fluid designs so that should I want to apply something like min-width, I can do it once to that element instead of worrying about applying it to the major subsections of the page... But then normally I design all my websites as fluid, and THEN constrain them if it's what the client wants.