The left and right columns are absolutly positioned and are a fixed width.
The center column is flexible. It will automatically change shape, width can be controlled by setting appropriate margins or an actual width can be specified.
The layers overlap if the browser window is resized to a small size so you need to specify the stacking order (z-index).
CSS::
#lh-col{
position: absolute;
top: 20px;
left: 20px;
width: 180px;
border: 1px solid #333333;
background: #eeeeee;
color: #333333;
margin: 0px;
padding: 0px;
height: 400px;
}
#rh-col{
position: absolute;
top: 20px;
right: 20px;
width: 180px;
border: 1px solid #333333;
background: #eeeeee;
color: #333333;
margin: 0px;
padding: 0px;
height: 400px;
z-index: 1;
}
#c-col{
position: relative;
margin: 20px 220px 20px 220px;
border: 1px solid #333333;
background: #ffffff;
color: #333333;
padding: 20px;
z-index: 13;
}
More links?
Advertisements?