Topic: Forcing a DIV container to play like the BODY, html for BG image

Is this possible? I've set up a website with a background that sort of laces the sides of the main content interface. I've done it in this way so that users with low-resolution screens won't get an evil horizontal scrollbar due to a too-wide design, while high-res users can still enjoy the frilley border.
My question is, if I've already used up my BODY BG image for an extension of the header, is there any way to create another DIV container that won't create viewport scrollbars that I can use to lace the outsides of the footer? Or is this impossible... i.e. do DIV containers ALWAYS force a scrollbar to appear if they exceed the width of the window?
Thanks!

Any normal element should always force the horizontal scrollbar ... not just a DIV. Obviously, there are exceptions (positioned elements, negative margins, etc), but it is to be expected for elements that extend past the viewport ... you could use overflow:hidden, but that creates its own problems (like no vertical scrollbar when you need it).

That said, if you give the div a width of 100% (or just display:block), it should only take the width of the body, and consequently not precipitate a horizontal scrollbar. The background image will only display for as much of the element is visible, and won't cause a scrollbar on the viewport.

My reading comprehension isn't always the best, so if I missed some aspect of your question, please say so or provide us with an example URL (even just a proof of concept or "what I want" image).

Regards,
DC

It sounds like you're overlooking the usefulness of the 'html' element.

Once again, great solutions and clear explanations from this community. Problem solved! Thanks!!!

(Edited by Stackelberg on 07-15-2006 06:59)

That being said, can anyone explain the following quirky activity?

http://www.fusedeffects.com/MITSC/Sticky%20Footer%20Centered.htm

If you scroll to the bottom of the page, you'll notice two things:

1) When you slowly resize the window, the BG flowers (on edges of black content box) "stutter" back and forth.

2) On the right-hand side of the footer... just above the "flowers", you'll see that the black border is one-pixel off from the rest of the page. Yet, when I remove the background image in the footer DIV (which is exactly 650px, with black fill right to the edge) and just leave the footer as a 650px DIV container with a #000000 background, this problem corrects itself.

Now obviously I can just throw another empty DIV with bg-color #000000 in there underneath the footer-image-div to compensate for the footer-image-div's problem, but I would like to know why this 1-pixel-off thing is happening (as well as the stuttering thing, which doesn't happen in firefox.) *The 1-pixel-off thing happens in Firefox as well.

Any ideas? Is this a quirk of working with CSS/IE, etc?
Thanks

quote:

---

Stackelberg said:

2) On the right-hand side of the footer... just above the "flowers", you'll see that the black border is one-pixel off from the rest of the page.

---

This one's simple - examine the right-most column of pixels of Flowers.gif up close.