Tested in both Firefox and Chrome browsers. Check out the jsFiddle demo here: http://jsfiddle.net/4JBBT/4/
This solution I came up with may only be partial if you're looking to use a background image instead of a solid color. In that case, the image would need to remain fixed while the content scrolls over it.
I haven't seen this specific approach before, but someone else may have thought of it already. If you have any suggestions for improvement, please share them as I'm not an expert in CSS.
To implement this solution, create empty divs for each column with their respective background colors (or images) using the following structure:
<div id="leftbg"></div>
<div id="rightbg"></div>
<div id="middlebg"></div>
The CSS styling for these background divs is as follows:
#leftbg
{
background-color: green;
height: 100%;
width: 14%;
position: fixed;
top: 0;
left: 0;
}
#rightbg{
background-color: blue;
height: 100%;
width: 24%;
position: fixed;
top: 0;
right:0;
}
#middlebg{
background-color: red;
height: 100%;
width:62%;
position: fixed;
top: 0;
right: 24%;
left: 14%;
}
Ensure that the positioning values relate correctly to one another, such as the width of `leftbg` matching the `left` value of `middlebg`.
Next, float content containers above the background divs, like so:
<div id="leftcontainer">
<div id="leftcontent"><p>hello</p></div>
</div>
<div id="middlecontainer">
<div id="middlecontent"><p>hello</p></div>
</div>
You can have more complex content within these containers, and they will scroll independently over the fixed background colors.
CSS styling for the content containers:
#leftcontainer{
width: 14%;
position: relative;
float: left;
}
#middlecontainer{
width: 62%;
position: relative;
float: left;
}
Ensure the widths match those of the background divs. The content and containers should have no background, allowing them to float over the backgrounds.
If the content divs are kept relatively positioned, each column can effectively behave like a separate page.