<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#header{
width: 100%;
text-align: center;
height: 100px;
background-color: blue;
}
#container{
padding-left: 200px;
padding-right: 150px;
}
#container .column{
float: left;
position: relative;
}
#center{
background-color: yellow;
width: 100%;
height: 200px;
}
#left{
background-color: red;
width: 200px;
margin-left:-100%;
right: 200px;
height: 200px;
}
#right{
background-color: green;
width: 150px;
margin-right: -150px;
height: 200px;
}
#footer{
clear: both;
height: 100px;
background-color: black;
}
/*
带有padding的圣杯布局，假设left层的左右padding为x，center层的padding为y，right层的padding为z.
left的宽度为X，right的宽度为Y。
复制代码
body {
min-width: 2(2x+X+2y)+(2z+Y)px;
}
#container {
padding-left: (2x+X)px;
padding-right: (2z+Y+2y)px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 0 ypx;
width: 100%;
}
#left {
width: Xpx;
padding: 0 xpx;
right: (X+2x+y)px;
margin-left: -100%;
}
#right {
width: Ypx;
padding: 0 zpx;
margin-right:(Y+2z+y)px;
}
#footer {
clear: both;
}
IE Fix
* html #left {
left: (2z+Y)px;
}*/
</style>
<body>
<div id="header">head</div>
<div id="container">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
原文：http://www.cnblogs.com/bgstyle/p/4374492.html