Take one div/layer and centre it. Then have a left hand column and a right hand column. Nice.
A problem is that the left/right columns won't produce the coloured navigation effect if longer than the height of the window. However this can be faked using a background image on the containing layer
This is the right column.
DIV.centrebox {
position:absolute;
left:50%;
top: 0px;
width: 500px;
height: 100%;
margin-left: -250px;
background-color: #336699;
}
DIV.leftcol {
position: absolute;
top: 0px;
width: 100px;
height: 100%;
background-color: #cccccc;
}
DIV.rightcol {
position: absolute;
top: 0px;
left: 100px;
width: 400px;
background-color: #0099ff;
}
</style>
<div class="centrebox">
<div class="leftcol">
This is the left column.
</div>
<div class="rightcol">
This is the right column.
</div>
</div>