I've recieved more than one question regarding the 'shadow-boxes' used on items such as my comments view. It seems to be a popular look and feel item, so, I thought I'd post a little tutorial on implementing it in a quick n' dirty fashion.

To start, a basic box needs to be defined:

<div style="border: 1px solid black; padding: 4px;">My Shadowed Box</div>

Next, the easiest solution I have found to make it work cross-browser is to wrap the first div in a container, and offset the inner container from the parent:

<div style="background-color: #999;">
  <div style="border: 1px solid black; padding: 4px; top: -2px; left: -3px;">My Shadowed Box</div>
</div>

That is about it! Now you can style the inner-box all you want, and the outer box will fit accordingly.