圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.header,.footer{height: 100px;background: pink;}
.container{min-height: 400px;padding: 0 200px 0 220px;}
.middle{width: 100%;min-height: 400px;background: #55A532;}
.left{width: 220px;min-height: 400px;background: paleturquoise;
margin-left: -100%;
left: -220px;
}
.right{width: 200px;min-height: 400px;background: papayawhip;
margin-left: -200px;
left: 200px;
}
.middle,.left,.right{float: left;position: relative;}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container clean">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
双飞翼布局
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.header,.footer{height: 100px;background: skyblue;}
.container{width: 100%;min-height: 400px;background: #ccc;}
.left{width: 220px;min-height: 400px;background: pink;
margin-left: -100%;
}
.right{width: 200px;min-height: 400px;background: hotpink;
margin-left: -200px;
}
.container,.left,.right{float: left;}
.middle{margin:0 200px 0 220px;}
.footer{clear: both;}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="middle">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body>
</html>