0

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 trigger 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?

Fer
  • 4,116
  • 16
  • 59
  • 102
  • 1
    The problem does not lie with the header and footer but with the overflowing image. It is bigger than it's container and forces the browser to make a horizontal scrollbar. In order to not completely destroy your layout the rest of the page is not changed by the browser, resulting in the image getting out of it's container. Give the image max-width:100%; to prevent it from flowing over it's container's edge. Or resize it the way you want. – Bazzz Nov 19 '10 at 15:50
  • @Bazzz: I'm sorry but that's not the solution I was hoping for. I know I can resize the image to fit the normal layout width but I want the image to be displayed this wide yet with a working layout. – Fer Nov 19 '10 at 16:18
  • You really need to keep that image inside the column. You could change the width of your layout. That would do it. – Dave Nov 19 '10 at 16:33
  • I agree with Dave, you NEED to keep the image INSIDE the column/container in order to have control over the rendering result of your page. You can then adjust the behaviour of the column/container so that it can grow to fit your image in full size. – Bazzz Nov 20 '10 at 07:00

2 Answers2

1

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.

morewry
  • 4,320
  • 3
  • 35
  • 35
  • Hey, I took a look. If you want to achieve that effect you're going to have to avoid setting any widths at all. And it still might not be perfect. I'll add some code to my response in a minute. – morewry Nov 19 '10 at 21:48
  • Whoops, nevermind, it was only in Firefox. Probably not good enough. How about a fancier pan effect on the image? Horizontal scrollbars aren't recommended anyway (http://www.useit.com/alertbox/20050711.html). Using jQuery you could retrieve the width of the image and/or do an effect sort of like offered by these already-written plugins (http://plugins.jquery.com/plugin-tags/pan). Or overflow:auto around the image only (inner scrollbars)? – morewry Nov 19 '10 at 22:05
  • Thanks for the detailed explanation. I think I'm going to go for the max-width:100% solution. It works very well for all image formats up to "large". For the original image size, which can span as much as 3000px I will produce an optimized layout, or perhaps no layout at all. – Fer Nov 20 '10 at 13:10
  • You're welcome. :-) I'm glad you found a solution you're happy with – morewry Nov 21 '10 at 16:27
0

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;"

Dave
  • 8,879
  • 10
  • 33
  • 46
  • Thanks for your suggestions. Given that I do not know how wide a page will ever be and that I simply cannot limit the width of an image to a fixed value, should I conclude that what I want is not possible? – Fer Nov 19 '10 at 16:03
  • Another suggestion is, you could put the entire website in a container, set it to width:100% and overflow: none; This will cut off the image at the edge of the browser window, but allow you to expand it to see the full image. – Dave Nov 19 '10 at 16:34