Question

I have a faux column for the sidebar with a background image repeat-y. However, I would like to add a drop shadow to the entire image. How do I do this?

I can’t seem to be able to figure it out. Below the box shadow applies only to the sidebar, but I want it to apply to the entire home_navbg.jpg faux column.

<div id="wrapper">
   <div id="sidebar">
   </div>
   <div id="content">
   </div>
</div>

#wrapper {
    width: 100%;
    background: url('../img/home_navbg.jpg');
    background-repeat: repeat-y;
}
#sidebar {
    width: 240px;
    height: 100%;
    float:left;
    box-shadow: 0px 4px 20px #231F20;
    -webkit-box-shadow: 0px 4px 20px #231F20;
    -mox-box-shadow: 0px 4px 20px #231F20; 
}

Edit: In the end, I just put the drop shadow in the background image itself. I guess CSS3 can’t do it all.

Answer 1

The faux column seems to be a tricky (hacky?) solution to the “how to achieve equal height columns” problem, if I understand it correctly.

CSS3 has new a property that could do what I assume you would like to achieve.
It is called box-flex: http://www.w3schools.com/css3/css3_pr_box-flex.asp

Though it has limited browser support (no IE, Opera).

Is this similar to what you want?
http://jsfiddle.net/yuUKv/78/

Actually, what is the reason to use faux column? Probably you would be better (browser support wise…?) off using a javascript solution (jQuery is relatively easy to use) to properly adjust height of elements.