Two columns layout with left column "over" right column effect - css

Question

I'm trying to imitate this image:
(original image page)
There's a shadow effect from the left column onto the right column, usually I use the faux columns method and put the background on the container but for this case the left column should be over the right column.
EDIT: I have now this base on your answer but the background on the sidebar doesn't stop at the container's height (it overflows to the bottom of the page).
#map-app {
height: 100%;
min-height: 650px;
width: 1200px;
margin: 30px auto;
background-color: #FFFFFF;
.sidebar {
background-image: url('/data/images/map/v2/sidebar_separator.png');
background-position: top right;
background-repeat: repeat-y;
position: absolute;
height: 100%;
width: 350px;
z-index: 9999;
}
.content-container {
position: absolute;
height: 100%;
width: 100%;
z-index: 9998;
}
}
It looks like this:
Any suggestions as of how I could achieve this?

Answer 1

If you want to make sure that the left column will be positioned directly above the right, obviously use the z-index element and provide the left column with a shadow effect for the right border. This would allow you to fill the page entirely with the right column, and half with the left column, using z-index to set the left columns stack order above the right. I won't display any code for you if you won't show at least a snippet of what you have. Kind of pointless.
Update: You would obviously have to use position: absolute; for both columns in order to achieve this effect you are aiming for, if you set it to relative the browser would not allow them to overlap.
Update: If you're looking to stretch both columns to the height of the browser, you'd obviously use the same container for both and set it's height: 100%; The problem with having a container, left column, and right column is, you can set the container to 100% height, but that just gives the content you put inside of it 100% height, doesn't mean the content will also be exactly 100% in size. What I would recommend doing is to change the container code to height: 100%; width: 100%; and only set one <div class="container"></div>
Code Update:
.container {
height: 100%; width: 100%;
}
.leftcolumn { // Guessing this would be your .sidebar
overflow: hidden; // Option 1: Set the overflow to hidden.
position: absolute;
height: 100%; width: 50%; // Option 2: Set the height slightly lower. like 99%
z-index: 9999; // Higher than right.
}
.rightcolumn {
position: absolute;
height: 100%; width: 100%;
z-index: 9998; // Lower than left.
}