常用div+css三列布局结构与样式（一）

三列布局很常见，通常是左右两列宽度固定，然后中间内容自适应。

结构：

1 <div id="nav">内容</div>
2 <div id="sidebar">内容</div>
3 <div id="main"> 内容 </div>

样式：

1 #nav{ float:left; margin-right:10px; overflow:hidden; width:15%; background:blue; height:200px;}
2 #sidebar{ float:right; margin-left:10px; width:20%; overflow:hidden;  background:yellow; height:200px;}
3 #main{ overflow:hidden; background:red; height:200px;}

利用浮动，让左层左浮动，右层右浮动，然后中间的层会自动到中间去，这种三列布局的结构只能是左右中，否则布局会乱，达不到想要的结果。