Display shadows in CSS layout

Have been looking around the web in search of a tutorial to apply a drop shadow to either side of a container. Left and right only to be specific.However, I am struggling to understand how to setup the left and right shadows. I made a main wrapper with the complete width of the website, which accounts for the shadows.

Basically, you create a wrapper image which spans both your columns. Then at the left & right edges, you apply a drop shadow. Export your wrapper image and you're set.

I didn't look at your CSS file in-depth but make sure if you're using a fixed width layout that your math equals the total width of your wrapper, whatever that happens to be.

Then the CSS is:

Code:

---

.content{
background-image:url(wrapper.jpg);
background-repeat:repeat-y;
}

---

That will make it difficult as any specific advice would depend on your coding as positioning and sizing are vital considerations.

Typically though shadows require some shims, in essence, if you think of your panel it has a South, East, North and West side. Most designs I've seen depend on having shims on the S and N side, implementing the shadow and either the E or W end of the shadow ending.

The E or W shadows can usually be implemented using the containers of the panel – but this of course depends on how you've done your design.

The only other way i was thinking is if i set it up so that row 2 has another div inside and i set the top margin to a negative... then set the 3rd row to a negative as well but set it to be behind row 2...???