Issue with CSS Shadow

Question

I am having an issue with a shadow displaying incorrectly in CSS. It is set to drop on on the bottom and to the right of the box but for whatever reason it is being cut off and I can't work out why.

JS Fiddle http://jsfiddle.net/jyb5V/

#content {
    padding: 0 270px 0 0;
    margin-bottom: 50px;
    height: 800px;
    background-image: url("images/mainbg.jpg");
    border:1px solid #000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    box-shadow: 4px 4px 2px #000000;
}

Website http://www.debbie.travismoore.co.uk/

Any help is appreciated, Thanks

Answer 1

Remove overflow: hidden;

#container {
    width: 100%;
    float: left;
    overflow: hidden;  // remove this line 
}

Demo