?
简单三栏布局效果如下图：
?
?
实现代码如下：
?
<style type="text/css">
.border{border: 1px solid #ccc;}
div{margin:0 0 5px 0;}
#wrapper {width: 500; margin: auto;}
#header {width: auto; }
#twoColumn {width:100%;float: left; }
#nav{float: left; width: 150px; }
#content{width:auto;margin-left:157px;margin-right:177px;}
#promo{width:170px; float: left;margin-left:-172px;}
#footer{clear:both;}
</style>
<div id="wrapper">
?<div id="header" class="border">
??<div id="header_inner">
???Header
??</div>
?</div>
?<div id="threeColumn">
??<div id="twoColumn">
???<div id="nav" class="border">
????<div id="nav_inner">
?????<h3>Left Nav</h3>
?????<ul>
?????
?????</ul>
????</div>
???</div>
???<div id="content" class="border">
????<div id="content_inner">Content</div>
???</div>
??</div>
??<div id="promo" class="border">
???<div id="promo_inner">
????<h3>Promo</h3>
????<p>11</p>
???</div>
??</div>
?</div>
?<div id="footer" class="border">
??<div id="footer_inner">
???Footer
??</div>
?</div>
</div>
?
复杂三栏布局效果如下图：
?
?
实现代码如下：
?
?<html>
?<style type="text/css">
??* {font-size: 14px;}
??div.inner {border:1px solid #ccc; margin:5px;}
??div#wrapper{width:600px;}
??div#nav{float: left; width:200px;}
??div#twoColumn{margin: 10px 0px 10px 200px;}
??div#content{padding-right:200px;margin-bottom:5px;}
??div#login{width:200px;float: right;margin-top:-5px;margin-bottom:5px;}
??div#url{clear:both;margin-bottom:10px;}
?</style>
?<body>
?<div id="wrapper">
??<div id="header">
???<div id="header_inner" class="inner">
????<h3>Header</h3>
????<ul>
?????<li>Header 1</li>
?????<li>Header 2</li>
????</ul>
???</div>
??</div>
??<div id="nav">
???<div id="nav_inner" class="inner">
????<h3>Nav</h3>
????<ul>
?????<li>Nav 1</li>
?????<li>Nav 2</li>
????</ul>
???</div>
??</div>
??<div id="twoColumn">
???<div id="login">
????<div id="login_inner" class="inner right_clear">
?????<h3>Login</h3>
?????<ul>
??????<li>Login 1</li>
??????<li>Login 2</li>
?????</ul>
????</div>
???</div>
???<div id="content" class="right_clear">
????<div id="content_inner" class="inner right_clear">
?????<h3>Content</h3>
?????<ul>
??????<li>Content 1</li>
??????<li>Content 2</li>
?????</ul>
????</div>
???</div>
???<div id="url">
????<div id="url_inner" class="inner">
?????<h3>Url</h3>
?????<ul>
??????<li>Url 1</li>
??????<li>Url 2</li>
?????</ul>
????</div>
???</div>
???<div id="hot">
????<div id="hot_inner" class="inner">
?????<h3>Hot</h3>
?????<ul>
??????<li>Hot 1</li>
??????<li>Hot 2</li>
?????</ul>
????</div>
???</div>
??</div>
??<div id="footer">
???<div id="footer_inner" class="inner">
????<h3>Footer</h3>
????<ul>
?????<li>Footer 1</li>
?????<li>Footer 2</li>
????</ul>
???</div>
??</div>
?</div>
?</body>
</html>