<!doctype>
<html>
<head>
<title>圣杯布局</title>
<style>
body,div{margin: 0;padding: 0;}
.main {
background:red;
width:100%;
float:left;
}
.left {
background:yellow;
width:300px;
float:left;
margin-left:-300px;
}
.right {
background: green;
width:250px;
float:left;
margin-right:-250px;
}
#head, #footer {
height:100px;
background: #666;
color: #eee;
text-align: center;
clear:both;
}
#content{
padding-left:300px;
padding-right:250px;
}
</style>
</head>
<body>
<div id=‘head‘>
header
</div>
<div id=‘content‘>
<div class=‘left‘>
lefterretr
</div>
<div class=‘main‘>
main
</div>
<div class=‘right‘>
right
</div>
</div>
<div id=‘footer‘>
footer
</div>
</body>
</html>圣杯布局它的目标是左右两栏定宽，中间那一行流式
原文：http://xddesign.blog.51cto.com/8748915/1615287