三栏布局
?
简单三栏布局效果如下图：
?
?
实现代码如下：
?
<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" alt="3栏布局">
?
实现代码如下：
?
?<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>Footer</h3>
????<ul>
?????<li>Footer 1</li>
?????<li>Footer 2</li>
????</ul>
???</div>
??</div>
?</div>
?</body>
</html>