Mark 0

I have a div that is currently set to 100% of the page width. When I add a drop shadow with a spread specified in px, the width it now pushed over 100% and a scroll bar appears in the browser window.


div.footer {
    background: #494548;
    border-top: 1px solid #000;
    -moz-box-shadow: 0px -5px 10px rgba(110, 110, 110, 0.5);
    color: #fff;

Removing the spread (3rd number, 10px) returns the div's width to 100%.

Is there anyway to specify either;

  • the direction of the spread (in this case, vertical only)
  • hide the overflow of the shadow

Any help/insight is appreciated!

6 answers

This was chosen as the best answer

Sounds like a Firefox bug. I'd probably go with a background or border image instead of a box shadow since it's only going to run along the top.

Answered about 9 years ago by Nathan Duran
  • I agree w/you both. Definitely seems like a bug. The bg image will work (and probably in more browsers too) but would have preferred a pure-CSS solution. Thanks for the help! Mark about 9 years ago
  • Also of note, testing in Safari 4.0 on Mac produces the same results. The shadow blurs to the right of the box and pushes out the overall page width. Mark about 9 years ago
  • A blur is a blur, so it's going to go every direction. WebKit will let you use clipping masks, but I don't know if that affects the overflow offhand. Nathan Duran about 9 years ago
Ceane 0

I'm totally having the same problem and I've looked EVERYWHERE trying to fix this. Safari and Chrome do the same thing so I doubt it's just a bug. If you've found a fix please get back to me. The only thing I found useful was to remove it or reduce the height.

Answered about 9 years ago by Ceane
  • Depending on your situation, I have found a way to "fix" this. Enclose the block w/the drop shadow in another block. Set the outer block to overflow: hidden; and add padding on which ever side you want the drop shadow of the inner box to leak. It's not perfect, it breaks w/rounded corners but it may fix the problem in your situation Mark about 9 years ago
  • thx. i'll test that out. i also found this but clip doesnt work for me so ill try your method. Ceane about 9 years ago
  • OHMYGODTHANKYOU!!!!!!!!!!! This helped me solve a 3 day problem. Thank you very very much!! Ceane about 9 years ago
  • Glad to hear it worked for you! Mark about 9 years ago

The box-shadow working draft is back, and it states clearly that "Shadows do not trigger scrolling or increase the size of the scrollable area," so it appears that this is a bug in all modern browsers.

Answered over 8 years ago by Michael C.

All i know is box-shadow should never affect the layout, so like the previous poster it does sound like a Firefox bug - the browser trying to fit the shadow in the page.

Check out this page - all of the elements have CSS shadows but when they're floated the shadow is hidden due to the other element overlapping it. This is what I mean about not affecting the layout.

I'm not sure what you're requirement is, but if the width was 99% or 98% it might just work?



Answered about 9 years ago by Marko Ivanovski

It's hard to say whether it's a bug or working as designed because the CSS3 spec that used to define it has since been modified (the entire section is gone), leaving the definition up to convention (and at least Safari and Firefox seem to behave the same).

You might want to try experimenting with overflow or box-sizing, but from my testing it doesn't appear as if these can help.

Answered about 9 years ago by Alan Plum

It's not a Firefox bug, box-shadow applies to the outside of the box model unless you specify "inset". it works just like margin and padding.

Just set your box-shadow element to 'overflow-x : hidden; or overflow-y : hidden;'

Answered over 8 years ago by VagrantRadio