CSS Box-Shadow clipped/squared

Question

Hi I have a div at the top of my page

http://www.uk-sf.com/MyTraining.php

the box-shadow is cut on the wrapper, I tried giving it a z-index but no joy any ideas?

.titlebox{ 
width:977px;
background-color:rgba(48, 48, 48, 1);
padding:10px 5px;
margin: 5px 5px;
font-size: 24px;
border:3px double rgb(138, 138, 138);
-webkit-box-shadow: 0px 0px 51px 7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 51px 7px rgba(0,0,0,0.75);
box-shadow: 0px 0px 51px 7px rgba(0,0,0,0.75);
}

Help appreciated

Answer 1

Your #contentContainer has overflow:auto; : is it on purpose?

If not, add this to your CSS :

#contentContainer {
   overflow: visible;
}

or just delete the overflow:auto declaration from your CSS.

(overflow: auto is asking your contentContainer to clip its content.)