Three Column - Pixel Perfect
Ver 2.0
Some call this layout the holy grail, a 3 column layout with flexible center column. The left and right divs overlap the center div but fall behind it (this helps avoid a double border).
Its very easy to set up and customise. But getting it "pixel-perfect" is more difficult!
CSS::
#lh-col{
position: absolute;
top: 20px;
left: 20px;
width: 182px;
border: 1px solid #333333;
background: #c0c0c0;
color: #333333;
margin: 0;
padding: 0;
height: 500px;
z-index: 2;
voice-family: "\"}\"";
voice-family: inherit;
width: 180px;
}
html>body #lh-col {
width: 180px;
}
#rh-col{
position: absolute;
top: 20px;
right: 20px;
width: 182px;
border: 1px solid #333333;
background: #c0c0c0;
color: #333333;
margin: 0;
padding: 0;
height: 500px;
z-index: 1;
voice-family: "\"}\"";
voice-family: inherit;
width:180px;
}
html>body #rh-col {
width: 180px;
}
#c-col{
position: relative;
margin: 20px 201px 20px 201px;
border: 1px solid #333333;
background: #ffffff;
color: #333333;
padding: 20px;
z-index: 3;
}
/* PLEASE READ BOX HACK INFO */