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

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