What is the best semantic and valid method to make drop shadow around whole #wrapper? on all side.

Question

What is the best semantic and valid method to make drop shadow around whole #wrapper? on all side. horizontally can be fixed but vertically should be expandable.

Answer 1

• Some JavaScript trick
• CSS3 or custom browser styles
• Use images around the #wrapper

Shadows can hardly be made semantically correct since they have no meaning. It's just a decoration (presentation) element.

Answer 2

If you are willing to go with another, non semantic method for IE, you could simply use CSS 3 for current (Webkit and Gecko based) browsers:

box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

Of course, for IE you have a few other options.

• Use a single image for the background with a drop shadow.

• Use some CSS trickery to have a few wrapper divs with some small borders that composite the shadow.

  

• Use javascript to create the drop shadow.

The last one has the advantage of given you the chance of using the CSS box-shadow on CSS3 enabled browsers, and the Javascript drop shadow on the rest (IE/Opera).

Answer 3

If the width is fixed I wouldn't use a wrapper I'd do like that:

<div class="box-header">
</div>
<div class="middle">
my content
</div>
<div class="box-footer">
</div>

For top and bottom classes I'd put the top and bottom shadows as a css background image.

Then I'd repeat-y a background image representing shadows on both sides of the box.

If you don't care about cross-browser compatibility, prefer using CSS3 properties.