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!

Tsimshian

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.

Quart

Thanks! To clarify your post for others 'R' is the radius of your blur (I'm having a slow day and it took me a sec). – Aureus

@Darwin, can you provide a sample of this. I haven't been working on anything with this problem lately. If you can provide a quick demo of it working I'll change my selected answer. Thanks, it sounds promising. – Tsimshian

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.

Disdainful

Doing the absolute position makes the footer appear to be attached to the bottom of browser window as opposed to the bottom of the website page and this is not something users expect or are accustomed to in most cases. – Tsimshian

Did the overflow help though? – Disdainful

No it did not. According to w3schools ref pages, visible is the default value anyways. Thanks for the suggestion though. – Tsimshian

Answer 3

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

Filomena

I've expanded the css to show you how I've accomplished this. Doing it this way mimics the way a layout would behave with table based layouts. – Tsimshian

Answer 4

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

Outcome

Answer 5

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.

Neuropathy

Answer 6

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.

Tsimshian

dang, was looking for a solution to this also :/ – Surtout

Answer 7

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.

Wanhsien

Answer 8

I have a div that is 100% height (ie full height on screen) and there was a box-shadow:
box-shadow: 0 0 10px rgba(0,0,0,0.4);

This was causing the scroll bars to appear, even though content was not longer than the screen.

All I did was to set a negative vertical offset: box-shadow: 0 -10px 10px rgba(0,0,0,0.4); and that solved it.

Arnuad

Answer 9

Please add position: relative; in your shadow div, remove from header, content, footer. It's work in my side.

Anthill