Hi everyone,

I need a bit of help applying a drop shadow image to a range of DIV elements. The elements in question already have a background image so I am wrapping another DIV around them. Things get complicated further because I'm also using the 960gs CSS framework.

This is my current HTML for a content box type display:

<div class="grid_12 boxout-shadow-920">
 <div class="boxout">
  <p>planetCJD.co.uk is the personal site and blog of CJD. The site is still a work-in-progress but please do have a look around and let me know what you think! </p>
 </div>
</div>

Boxout CSS:

.boxout {
 background:url("../images/overlay.png") repeat-x scroll 0 0 #EEEEEE; 
 -moz-border-radius:4px 4px 4px 4px;
 border:1px solid #DDDDDD;
 margin-bottom:15px;
 padding:5px;
}

boxout-shadow-920 CSS:

.boxout-shadow-920 {
 background:url("../images/box-shadow-920.png") no-repeat scroll 50% 101% transparent;
}

Now this works to a degree. The boxshadow image shows at the bottom of the content box which is what I would like. However as I'm using a fixed percentage of 101%, if the content box height is too small, not much of the drop shadow image gets shown, and if the content box is too big, whitespace starts to appear between the box and the shadow image.

So anyway, what I'm looking for is a cross-browser CSS based solution for doing this properly.

I'm sure there is an easy answer to this - any help is appreciated!