两栏布局和双飞翼布局

介绍一下一般在后台管理系统时常常会用到的布局。首先是自适应两栏布局，一侧保持一定的宽度可以作为导航，另一侧为主体内容，可以根据浏览窗口的大小而改变自身的大小。
自适应两栏布局：
HTML代码：

css样式
.left{
width: 100px;
hieght: 400px;
float: left;
background: red;}
.main {
height: 200px;
background: pink;}

接下来是双飞翼布局，也可以叫做圣杯布局；是指浏览器两侧各有一个固定宽度的盒子，而中间的主体可以根据浏览器窗口大小改变自身大小。
HTML代码：

css样式：

上面的代码是先解析左右两侧盒子后解析中间盒子。在面试时，可能出现这样的问题：如何实现页面先加载中间内容区域再加载两端区域，那此时的代码应该如下面这样。
HTML代码：

CSS样式：
.center{height:500px; background:#ff0; margin:0 300px;}
.left{width:300px; height:300px; background:#f00; position:absolute; left:0; top:0;}
.right{width:300px; height:300px; background:#f0f; position:absolute; right:0; top:0;}