leftcontent

#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#99CCCC;
border-right: 1px solid #000;
background-color: #CCFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999999;

 

 

 

 

centercontent

#centercontent {
	background:#FFFFFF;
	margin-left: 199px;
	margin-right:199px;
	margin-left: 201px;
	margin-right:201px;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;

This is the most elegant technique and perhaps the most sought after layout: a 3 column page with a fluid center column. Easy to understand, easy to implement. I first saw this layout at dynamic ribbon device and have since learned that the sweet CSS came from Rob Chandanais of BlueRobot.

Read about the IE5x PC workaround in use on this page here.

 


rightcontent

#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#99FFFF;
border-top: 1px solid #999999;
border-right: 1px none;
border-bottom: 1px none;
border-left: 1px solid #000;
padding-right: 3px;
padding-left: 3px;
}

This page is part of CSS Layout Techniques, a resource for web developers and designers.

Other Layout Techniques:
3 columns, the holy grail
2 columns, ALA style
4 columns, all fluid
3 columns, all fluid
static width and centered
nested float
Does it validate?

 

modified by Webdev design from glish.com : CSS layout techniques : 3 columns, the holy grail