How can I avoid my headers and footers being broken when displaying content wider than the viewport?

I have coded myself into a CSS corner. Have a look at this page:

http://staging.jungledragon.com/image/1082/sizes/large

Open this page and make sure the width of your browser window is smaller than the total width of the content, so that a horizontal scrollbar appears. If you now scroll to the right, you will notice that both the header and footer are broken, the reason being that they are set to 100%. 100% means the width of the viewport, not the browser window itself.

In my search for a solution, this one pops up a lot:

http://www.springload.co.nz/love-the-web/backgrounds-disappear-on-horizontal-scroll/

This is no solution for me since I do not know in advance how wide my footer and header need to be. Also, I cannot simply set it to a very high min width value since that would always trigg开发者_如何学Goer scrollbars, even when they are not needed.

How can I extend my headers and footers to the size of the actual browser window, whilst still getting proper horizonal scrollbar behavior. Is it possible at all?

I apologize that this isn't a definitive solution, but if you take a look at the page with a nice CSS debugger you can see that the width of html and body do not stretch to accommodate the overflowing image.

That's why the header and footer don't stretch. width:100% does not mean "width of the viewport", it means "width of the containing block."

The containing block is body. And body isn't stretching. It's is remaining constant regardless of the the width of the image. Thus the width of #wrappertop et al is not 100% of the horizontally-scrolling viewport. It's 100% of the body.

If you're really dead set on the viewport scrolling horizontally and having the header and footer stretch, I would first attempt to apply CSS to body (and/or html, which behaves as a containing block...sort of) to see if you can get them stretching. Then your header and footer probably will, too.

Centering the image or giving it a max-width are two good solutions -- but if that's not what you want, that's your prerogative. :-)

If I get a chance I'll see if I can experiment a little. But it's lunchtime. It's a place to start looking though.

You could set the minimum width of your header and footers to the width of your middle column (#colful), or the maximum width the page will ever be with images included.

min-width: 123px;

And you need to center the middle column too, instead of doing a left margin do something like this:

width: 900px;
margin: auto 0;

... ok nevermind, you already did. You need to contain the image inside that column. You can either manually resize the image, or do an overflow property like "overflow: none;"