CSS box shadow on container div causes scrollbars
- by kaile
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!
