I am working on a new layout for a website, and I am extremely close to achieving the result I want. However, there is one problem. I am using an adaptation of the technique described here (http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html, see the 3 column example just below the gorillas). Basically, my version uses an absolutely positioned CSS pseudo element as the backgrounds for the left column.
My problem arises when I attempt to apply a box-shadow to the pseudo element. The element, and its shadow, always appear on top of my main column.
To make all of this clearer I have created a simple example page here: http://www.3strandsmarketing.com/test4.html
My fear is that since I’m using a pseudo element based on the parent of my main column, it will never be able to sit under it, but I’m hoping there’s some way this can be worked around. Any ideas?
Ok, the solution here is to not use semi-transparent (rgba) colors for the main column. Otherwise, you will be able to see the drop shadow of the sidebar column through it, ruining the effect of one being on top of the other.
To see the correct effect, visit the example page, and use Firebug or another DOM manipulating tool to change the background color for the
#main-contentdiv fromrgba(0, 100, 0, 0.2)torgba(0, 100, 0, 1). You should now see that it is indeed “on top” of the left side bar.