Tricky Background Colors: Possible with CSS?

Question

How can I get to this:

  -------------------------------
  |                     |       |
  |                     |       |
  |                     |       |
  |                     |       |
  |                     |       |
  |                     |       |
  -------------------------------
<- #fff                 | #ddd  ->

I've got a fixed width centered div, two columns. The left one has a white background, the right one's background is grey. So far so good.

Now I want the background colors extend to the page margin. As sketched above. Is this somehow possible?

Thanks for your help!

Answer 1

If I understand correctly what you seek, you do not want the background the same color as the div's, but you want it to align with the "joint" not matter the width of the window even though the content div's are part of a centered, fixed width container. The following solution seems to work thought not tested in all browsers (took me a few hours to solve).

HTML:

<div class="leftBkg">   
    <div class="content">   
        <div class="left"></div>        
        <div class="right"></div>
    </div>
    <div class="rightBkg"></div>
</div>

CSS:

body {
    background-color: cyan; /* just to see no body bkg is showing */
    padding: 0;
    margin: 0;
}
.content {
    width: 700px; 
    margin: 50px auto; /* top and bottom margin for illustration */
    position: relative;
    z-index: 1; /* lift it above right background */
    overflow: auto;
}
.left {
    width: 500px; 
    background-color: #ff0000; 
    float: left; 
    min-height: 1000px; /* just for demo */
}
.right {
    width: 200px;  
    background-color: #0000ff; 
    float: left; 
    min-height: 1000px; /* just for demo */

}
.rightBkg {
    background-color: #dddddd;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    margin-left: 150px; /* (left column width - right column width) / 2 */
    z-index: 0; /* keep it below content */
}
.leftBkg {
    background-color: #ffffff;      
    position: absolute;     
    left: 0;
    width: 100%; /* make it window size */ 
    min-width: 700px; /* same as content width to keep backgrounds from scrolling horizontal on narrow window */
    min-height: 100%; /* make sure it always covers screen height */
    overflow: auto;
}