<div id="container">
<div id="header"><h1>header</h1></div>
<div id="wrapper"><!-- 主体文字 -->
<div id="content"><p><strong>1) Content here.</strong></p></div>
</div>
<div id="navigation"><p><strong>2) right part here.</strong></p></div>
<div id="extra"><p><strong>3) left part here.</strong></p></div>
<div id="footer"><p>footer</p></div>
</div>
1:2:1固定宽度布局:
body {text-align:center;display:block;}
div#container{width:700px;margin:0 auto;}
div#header{text-align:left;width:100%;}
div#footer{text-align:left;width:100%;clear:left;}
div#wrapper{float:left;width:100%}
div#content{text-align:left;margin-left:150px;width:400px;background:lightgreen;}
div#navigation{text-align:left;float:left;width:150px;margin-left:-700px;background:#B9CAFF}
div#extra{text-align:left;float:left;width:150px;margin-left:-150px;background:#FF8539}
[img]http://dl2.iteye.com/upload/attachment/0105/4623/c51d7758-b52a-38e6-ab56-86d3f29069c3.jpg[/img]
1:1:2固定宽度布局:
body {text-align:center;display:block;}
div#container{width:700px;margin:0 auto;}
div#header{text-align:left;width:100%;}
div#footer{text-align:left;width:100%;clear:left;}
div#wrapper{float:left;width:100%}
div#content{text-align:left;margin-left:300px;width:400px;background:lightgreen;}
div#navigation{text-align:left;float:left;width:150px;margin-left:-700px;background:#B9CAFF}
div#extra{text-align:left;float:left;width:150px;margin-left:-550px;background:#FF8539}
[img]http://dl2.iteye.com/upload/attachment/0105/4635/b8d31a88-6316-351b-b9f9-5abea4285877.jpg[/img]
2:1:1固定宽度布局:
body {text-align:center;display:block;}
div#container{width:700px;margin:0 auto;}
div#header{text-align:left;width:100%;}
div#footer{text-align:left;width:100%;clear:left;}
div#wrapper{float:left;width:100%}
div#content{text-align:left;margin-left:0px;width:400px;background:lightgreen;}
div#navigation{text-align:left;float:left;width:150px;margin-left:-300px;background:#B9CAFF}
div#extra{text-align:left;float:left;width:150px;margin-left:-150px;background:#FF8539}
[img]http://dl2.iteye.com/upload/attachment/0105/4616/90d064e0-24f4-38b7-9943-4acef91bf86b.jpg[/img]