title: Making a <div> with a drop shadow only on the left and right sides
body: <p>My goal is to add a drop shadow to the left and to the right side of a <code>#container div</code>, which is 960px wide.</p>
  
  <p>The <code>#container</code> itself contains a header, a nav menu, main content, sidebar, and foot. But the header itself juts out of the <code>#container</code> with a custom width due to a graphic.</p>
  
  <p>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 <code>#container</code> itself. A drop shadow to the left and right of a thing that already juts out would ruin the aesthetics.</p>
  
  <p>For better visualization, my site looks similar to <a href="http://www.doubleyourdating.com/" rel="noreferrer">http://www.doubleyourdating.com/</a>, but the header element juts out on both sides.</p>
  
  <p>I've tried to add a drop shadow to the left and to the right side of the <code>#container</code>, from the nav menu down with the following solutions:</p>
  
  <ol>
  <li><p>I Photoshopped a 1px high, 1010px wide image which contains a 25px "fade" on opposite ends. I CSS'd that as the <code>#container div background-image</code>, but, probably because the <code>#container</code> 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.</p></li>
  <li><p>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.</p></li>
  </ol>
  
  <p>How do I make this work?</p>