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

Imho, and according to my tests seems that css shadow on an element is increasing both total width and height of the page ( if the surrounding element has width or height set to 100%) as you said and I haven't found a css workaround for this problem yet.

So I've a question for you, how are you keeping your footer at the bottom of the page? and what's the width the footer has?

I've tried with absolute positioning ( as I'm used to do when I want a footer at the bottom of the page) but the problem It's the same with the width, of course you can set the width to a percentage like 90% but the problem remains... here's a snippet that illustrate this simple concept So this isn't a real answer, I've not found a solution for this yet

pastebin

Hope this's useful

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.

Answer 3

Well either the solution to this problem is very obscure or there is not a solution with the current technology. Its really too bad there is no way of accomplishing this as it is a common theme in web design.

I resorted to using a png shadow as it seems to be the only sane solution.

Answer 4

Not sure if this is the best solution as you have to add a container div, but if you wrap the element in a container div and set the overflow to hidden, it seems to work. You'll have to set padding where ever you want the shadow to be visible though.

I know it's not the best solution to this, but it works fine and I can't seem to figure out any other solution.

Answer 5

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 6

Try adding padding-bottom:8px (shadow height + blur size) to the #container element.

Answer 7

Better solution for me at least since it involves no wrapping element is to place a clipping rectangle on the element with the shadow.

In the example above something like, clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE). would clip the drop shadow on the bottom only.