css box shadow on a div container cut off

Question

edit: more general question: I like the box-shadow on divs, however when I place a div directly below the box-shadow'd div, that bottom part of the shadow doesn't overlay on top despite messing with z-indexes. So it seems like box-shadow cannot overlay another div? Any ideas would be great!

original question- I am using blueprint for a layout. This means there's a .container of 950px which then contains a #content.

In this case the #content fills the whole container so is also 950px.

I would like to have a drop shadow on the #content, but the problem is the shadow gets cut off since there is no space left to see it in the .container.

A workaround would be to decrease the width of the #content but that messes up the layout positionings I already have, and it looks too narrow.

Is there a way to get the box shadow to kind of ignore the parent container and appear over it? This isn't blueprint specific I guess, but that's the context. thanks!

EDIT:

body .container {
    margin: 0 auto;
    overflow: hidden;
    width: 950px;
}
body .container:after {
    clear: both;
    content: "";
    display: table;
}
#content {
    display: inline;
    float: left;
    margin-right: 0;
    width: 950px;
    box-shadow: 0 0 4px black;
    -moz-box-shadow: 0 0 4px black;
}

#content is directly in .container. If I put a drop shadow on #content you can't see it until I shrink the width, which messes with the inside elements.

Answer 1

It all depends what you are trying to achieve.

I was having difficulty with an inline-block group of list items. The right shadow was cut off by the list item next to it upon hover

A simple hack is to just add the following to the element:

li:hover {
    transform: scale(1,1);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
} 

WORKING EXAMPLE

Although, this may only work for specific scenarios. I have only tested it on my example above.

Answer 2

You don't need the overflow: hidden on the .container, since you already use clear fix on it. So, you can just throw it away: http://jsfiddle.net/kizu/gDXLf/