background-image being pushed right on narrow pages

views:

answers:

background-image being pushed right on narrow pages

I have a background-image used to separate my page footer from the main content. It displays fine when viewed in a browser window wider than the supported min-width of the page. However, if the window is resized to be narrower the image is pushed to the right relative to the main body.

How it displays in wide browser windows:

Good

How it displays in narrow browser windows:

Bad

Can I set the main body content not to push right up against the left-hand side of the window, but rather keep the 30 pixel margin when viewed in a narrow browser window?

The page is live here if the CSS will be helpful.

+1 A:

Yes, you should give the <body> a min-width. Just a little above 1000 works for me on your website, but I don't have an exact value. Probably the exact width of the ribbon.

-edit-

ribbon (1000px) + border (2 * 1px) = 1002px, that should do it.

Litso 2010-09-09 12:47:40

The problem is that your #footerTop and #footer are too big and are responding to the window shrink. The way I would get around this is by adding the background to the #footerContainer instead. If you align it to the centre it will always work since #footerContainer does not have a fixed width.

This will also mean that you won't get the horizontal scroll bar when the browser window is resized to 999px wide. It all depends on how small you want the window to be able to go

lnrbob 2010-09-09 12:48:55

ansaurus

tags:

views:

answers:

background-image being pushed right on narrow pages

related questions