在css+div网页布局中，有以下几种在设计中常用的方式：
1、二列固定宽度
这种类型的布局的设计原理是这样的：左右两个层分别设定固定的宽度和加上浮动属性就能达到效果；
2、二列宽度自适应
这种布局在设计的时候，与第一种稍有一些不同，就是在设置两列的宽度的时候，使用的不是具体的像素，而是用百分比这种方式来设置，如以下例子：
#left{width:20%;float:left;}
#right{width:80%;float:left;}
3、两列右列宽度自适应
原理是：只需设置左栏的宽度即可，右栏不设置任何宽度值，并且不浮动；如以下例子：
#left{width:20%;float:left;}
#right{}
4、二列固定宽度居中
原理是：使用一个层包住二列，并设置外层的宽度和使用margin-left:auto;及margin-right:auto这两个属性
5、三列浮动中间宽度自适应
这种布局方式跟前面几种不一样，而是采用绝对定位这种方法去实现的，其原理看例子就清楚了：
#left{width:100px;position:absolute;top:0;left:0;}
#right{width:300px;position:absolute;top:0;right:0;}
#center{margin-left:100px;margin-right:300px;}
从例子中可以看出，左栏和右栏都使用了position、top、left:或right这几个属性来实现层的定位，而中间的那列，只是设置了margin-left和margin-right这两个属性，并且其值分别是左右两列的宽度值
6、高度自适应
让我们通过例子来看看分析其原理吧：
html,body{height:100%;}/*设置html和body的height属性值为100%，是为了兼容ie和firefox*/
#div{height:100%;}
