Basically the same as the "Holy grail", a 3 column layout with flexible center column but with a header block for logo, banner or links. 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 except for the "pixel perfect" bit which can be tricky.
I have used the box hack on the left and right columns for IE5PC. It can be used on the center column instead which is where I originally had it. I prefer it this way.
CSS::
#lh-col{
position: absolute;
top: 60px;
left: 0;
width: 182px;
border: 1px solid #333333;
background: #c0c0c0;
color: #333333;
margin: 0;
padding: 0;
height: 500px; /*for demo*/
z-index: 1;
voice-family: "\"}\"";
voice-family:inherit;
width:180px;
}
/*for Opera*/
html>body #lh-col {
width:180px;
}
#rh-col{
position: absolute;
top: 60px;
right: 0;
width: 182px;
border: 1px solid #333333;
background: #c0c0c0;
color: #333333;
margin: 0;
padding: 0;
height: 500px; /*for demo*/
z-index: 1;
voice-family: "\"}\"";
voice-family:inherit;
width:180px;
}
/*for Opera*/
html>body #rh-col {
width:180px;
}
#hdr{
height:60px;
background:#eeeeee;
color:#333333;
margin:0;
}
#c-col{
position: relative;
/*include border in margin*/
margin: 0 181px 20px 181px;
border: 1px solid #333333;
background: #ffffff;
color: #333333;
padding: 20px;
z-index: 3;
}
/* PLEASE READ BOX HACK INFO */
More links?
Advertisements?