18

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?

Kev
  • 118,037
  • 53
  • 300
  • 385
Chopper
  • 181
  • 1
  • 1
  • 3

2 Answers2

41

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.

Shaz
  • 15,637
  • 3
  • 41
  • 59
  • 1
    This doesn't get rid of the top and bottom shadow, just reduces it. – Chris Stephens May 20 '13 at 19:31
  • This is not a valid answer. It's sort of a hack. It still keeps the shadow. For those who actually want to accomplish the goal, this doesn't solve the problem. – Jamel Toms May 27 '13 at 15:20
  • @ChrisStephens Code has been revised. – Shaz Jul 03 '13 at 14:04
  • oh yeah, awesome, this looks like the real answer to me. I modified your fiddler to add it to the situation i had to deal with and it works well: http://jsfiddle.net/cstephe/N9Tpf/1/ – Chris Stephens Jul 16 '13 at 19:52
-2

Single line of code : 

box-shadow: 4px 0 2px #222,  -4px 0 2px #222;

Just insert in corresponding css style element Done!

Werner Henze
  • 16,404
  • 12
  • 44
  • 69
Rakesh Kannan
  • 1