We're trying to figure out a 'creative' way to wrap our main page content area with a drop-shadow so it stands out from the main body background a bit, BUT have the bottom shadow under the footer ONLY show up when the page is short enough for there to naturally be space under the footer.

NOTE: You will probably need a screen resolution of at least 1280x1024 to really see the issue, otherwise the browser may not be tall enough.

Here's a test site showing you what we've done and how it should look on short pages: Short page example.

You'll see that we have 2 DIVs wrapping our main content area (#topImage and #bottomImage). So we put the main repeating background with the side shadows on the #topImage DIV, and a bottom 'capper' image with the bottom shadow on the #bottomImage DIV. For the bottom shadow image to show up, we had to add the bottom padding so it would extend below the footer.

So this works fine for short pages, but now look at a longer page that would cause the browser window to scroll: Long page example.

What we would PREFER for these longer pages that require scrolling is that scrolling down would not extend to the bottom drop-shadow, but instead stop at the bottom of the footer (#footer - dark wine-red DIV in example). We don't like the way it extends down to show the extra space and bottom shadow. Of course this happens because of the bottom-padding we had to add for it to show up at all.

  • Any creative/different way we could approach this with CSS??
  • If this isn't possible with just pure CSS, would we need a JS solution? If so, any instructions on how to pull this off as simply and lightly as possible (we're already loading the jquery library)?