接近完美布局：圣杯布局-CSDN博客

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css" />
 7 <style type="text/css">
 8 .cf:before, .cf:after { content: ""; display: table; }
 9 .cf:after { clear: both; }
10 .cf { zoom: 1; }
11 /*辅助 用背景颜色区分布局模块 可删*/
12 .page { background-color: #CCC }
13 .hd { background-color: red; }
14 .bd { background-color: #0F3; }
15 .ft { height: 60px; background-color: #09F }
16 .main { background-color: #FF3 }
17 .sub { background-color: #60F }
18 .extra { background-color: #008000 }
19 /*布局*/
20 .page { width: 980px; margin: 0 auto; }
21 .hd { height: 50px; }
22 .bd { padding: 0 230px 0 190px; }
23 .main { float: left; width: 100% }
24 .sub { float: left; width: 190px; margin-left: -100%; position: relative; left: -190px; }
25 .extra { float: left; width: 230px; margin-left: -230px; position: relative; right: -230px; }
26 </style>
27 </head>
28 
29 <body>
30 <div class="page">
31     <div class="hd">
32         <p>高度为50像素</p>
33     </div>
34     <div class="bd cf">
35         <div class="main">
36             <p>中间部分，记得清除浮动！这里的文章怎么是这样的呢，如果多添加文字，又会是什么样的呢？</p>
37         </div>
38         <div class="sub">这里基本列表出相关的信息等。这里的字多加一些会应该后面的背景吗？</div>
39         <div class="extra">
40             <p>扩展部分，广告等这类的。</p>
41         </div>
42     </div>
43     <div class="ft">
44         <p>底部信息。</p>
45     </div>
46 </div>
47 </body>
48 </html>