Making a <div> with a drop shadow only on the left and right sides

Question

My goal is to add a drop shadow to the left and to the right side of a #container div, which is 960px wide.

The #container itself contains a header, a nav menu, main content, sidebar, and foot. But the header itself juts out of the #container with a custom width due to a graphic.

As such, it does not get a drop shadow added to its right and left. Only the nav menu down needs the drop. This is because the header is set to a custom width, and juts out beyond the #container itself. A drop shadow to the left and right of a thing that already juts out would ruin the aesthetics.

For better visualization, my site looks similar to http://www.doubleyourdating.com/, but the header element juts out on both sides.

I've tried to add a drop shadow to the left and to the right side of the #container, from the nav menu down with the following solutions:

1. I Photoshopped a 1px high, 1010px wide image which contains a 25px "fade" on opposite ends. I CSS'd that as the #container div background-image, but, probably because the #container itself is set to 960px wide, the 1010px wide background can't show up. Note that changing the 960px width will create a cascade of death in this simple 2 column layout.

2. I tried CSSing up a makeshift shadow box div "around" the container div, but that isn't working because my header has a custom width that extends wider than the container.

How do I make this work?

Answer 1

You could try something like this:

box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;

Of course, mess around with the values until it suits you.