CSS box shadow on container div causes scrollbars

Question

I have a website with the following setup:

<div id="container">
   <div id="header"></div>
   <div id="content"></div>
   <div id="clearfooter"></div>
</div>
<div id="footer"></div>

I use the clearfooter and a footer outside the container to keep the footer at the bottom of the page when there isn't enough content.

My problem is that I would like to apply a box shadow on the container div in the following way:

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
           position:relative; padding:0px; background-color:#e6e6e6; 
           -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8), 
           3px 0px 5px rgba(0,0,0,.8);}
#header   {height:106px; position:relative;}
#content   {margin:0px; padding:10px 30px 10px 30px; position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer   {height:32px; padding:0px; position:relative; width:960px; 
           margin:0px auto 0px auto;}

As you can see its a drop shadow on on each side of the container div. However, in doing this, when the content doesn't take up the full height, there are still scroll bars caused by the shadow pushing past the bottom of the footer due to the blur.

Is there some way of preventing the shadow from going past the edge of the container div and causing a scrollbar?

Thanks for your help!

Answer 1

Webkit changed its behavior recently as pointed out here: http://archivist.incutio.com/viewlist/css-discuss/109662

Indeed as of today it is still an issue in Gecko and maybe other browsers.

---

I managed to fix this nasty problem on Gecko using negative margins which also work on all other browsers.

Let's assume you have a screen-wide element (E) with box-shadow applied with zero offsets and blur radius R. Let's assume you are dealing with horizontal scrollbar problem because shadow causes element E to relayout with added width.

1. wrap E with helper wrapper element (W)
2. set overflow:hidden on W
3. set padding: R 0 R 0 on W
4. set margin: -R 0 -R 0 on W

The idea is to use overflow hidden to clip out problematic shadows on the left and right. And then use padding+negative margin trick to not clip top and bottom shadows and to keep the box on the same spot in HTML flow.

You can adapt this technique to clip out any arbitrary sides of your problematic shadow box.

Answer 2

On the parent element of #container, adding overflow: visible may fix the problem.

Though as general advice for the footer at the bottom, you may want to instead forget about setting the min-height on #container and instead set footer with position: absolute and bottom: 0 and give #container a margin-bottom so it doesn't ever get hidden behind the footer. If you're going for having the footer at the bottom of the window just use position: fixed instead.

Hope it helps.