DIV综合布局实列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV综合布局实列</title>
<style>
html,body{ margin:0}
.clear{ clear:both; height:0} /*清除浮动层*/
/*左右固定宽度，中间自适应*/
#left{ float:left; background:#666; width:200px; height:300px}
#center{ background:#ccc; height:300px; margin-left:205px; margin-right:205px}
#right{ float:right; background:#666; width:200px; height:300px}
/*左边固定宽度，右边自适应*/
#left_1{ width:200px; height:100px; background:blue; float:left}
#main_1{ margin-left:202px; height:100px; background:#c2c}
/*左边自适应，右边固定*/
#left_2{ background:#000; height:100px; margin-right:202px;}
#right_2{ float:right; background:#482; height:100px; width:200px;}
/*四列平均宽度横排*/
#a{ float:left; height:100px; width:25%; background:#333}
#b{ float:right; height:100px; width:75%; background:#666}
.b1{ float:left; height:100px; width:33%; background:red; margin-right:1px}
/*六列自适应宽度横排导航栏*/
.nav-left,.nav-right{ width:2%; height:30px; background: yellow; float:left}
.nav{ width:16%; height:30px; background:blue; float:left; color:#FFF}
</style>
</head>
<body>
<!--左右固定宽度，中间自适应-->
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
<div class="clear"></div>
<!--左边固定宽度，右边自适应-->
<div id="left_1"></div>
<div id="main_1"></div>
<div class="clear"></div>
<!--左边自适应，右边固定-->
<div id="right_2"></div>
<div id="left_2"></div>
<div class="clear"></div>
<!--四列平均宽度横排-->
<div id="a"></div>
<div id="b">
<div class="b1"></div>
<div class="b1"></div>
<div class="b1"></div>
</div>
<div class="clear"></div>
<!--六列自适应宽度横排导航栏-->
<div>
<div class="nav-left"></div>
<div class="nav">1</div>
<div class="nav">2</div>
<div class="nav">3</div>
<div class="nav">4</div>
<div class="nav">5</div>
<div class="nav">6</div>
<div class="nav-right"></div>
</div>
</body>
</html>
