I'm designing my portfolio site right now and I'm trying to figure out the best way to create the following effect using CSS. I want to have a center container with a box-shadow, and then color bars to visually separate out the different sections.
I'm not sure what the best method is to accomplish this since you can't create a box-shadow that only extends from the left and right. Currently, I have the following:\[code\] <div id="content"> // the container with the shadow </div> <div id="header"> // the brown section </div>\[/code\]\[code\]#content { width:960px; margin:auto auto; box-shadow:0px 0px 50px 5px #999;}#header { position:absolute; top:0; z-index:-99; width:100%; height:550px; background:#cbbbae; }\[/code\]
This "works", but I don't want to rely on absolute positioning. Ideally, each section would be it's own div container, and I would just change the background color.Perhaps there's an obvious solution that I'm missing, but that's why I'm here.