css box shadow on a div container cut off

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 ge开发者_开发知识库t 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.

---

I would add some padding to the .container element and ensure that your #content stays at the width you need.

---

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/

---

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.

---

You could make the .container wider (960 is perfectly acceptable for a fixed width) and keep the #content centered inside the .container. Does that mess up anything for you?