一列固定宽度
一列式布局是所有布局的基础，也是最简单的布局形式。一列式布局是一种固定的宽度的布局样式，一般是一个带有header、center、和footer 三个并列的布局。
XHTML:
<div id="layout">1列固定宽度</div>CSS:
/*1列固定宽度*/
#layout{
background-color: #cccccc;
border: 2px solid #333333;
width: 300px;
height: 300px;
}效果图：
一列宽度自适应
自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值。良好的自适应布局网站对不同分别率的显示器都能够提供最好的显示效果。
默认状态下的div将占据整行空间，即是宽度为100%的自适应布局。一列自适应布局只要改变这个设置，将固定值改为百分比值的形式便可以了。
自适应的优势是，当扩大或缩小浏览器窗口大小时，其宽度还将维持着与浏览器当前宽度比例的80%范围。
XHTML:
<div id="layout-self-adaption">1列宽度自适应</div>CSS:
/*1列宽度自适应*/
#layout-self-adaption{
background-color: #cccccc;
border: 2px solid #333333;
width: 80%;
height: 300px;
}效果图：
一列固定宽度居中
页面整体居中是网页设计中常见的形式。
div本身支持align="center"属性，可以让div呈现居中状态。但是align对齐属性是一种样式代码，写在XHTML的div属性中，不符合分离原则。
XHTML:
<div id="layout-center">1列固定宽度居中</div>CSS:
/*1列固定宽度居中*/
#layout-center{
background-color: #cccccc;
border: 2px solid #333333;
width: 300px;
height: 300px;
margin: 0px auto;
}这里margin属性用于控制对象的上、右、下、左4个方向的外边距。当margin使用两个参数时，第一个参数表示上下边距，而第二个参数则表示左右边距。margin还支持一个叫auto的属性值，auto值是让浏览器自动判断边距。
效果图：
二列固定宽度
XHTML:
<div id="left">左列</div>
<div id="right">右列</div>CSS:
/*2列固定宽度*/
#left{
background-color: #cccccc;
border: 2px solid #333333;
width: 300px;
height: 300px;
float: left;
}
#right{
background-color: #cccccc;
border: 2px solid #333333;
width: 300px;
height: 300px;
float: left;
}效果图：
二列宽度自适应
XHTML:
<div id="left-self-adaption">左列</div>
<div id="right-self-adaption">右列</div>CSS:
#left-self-adaption{
background-color: #cccccc;
border: 2px solid #333333;
width: 20%;
height: 300px;
float: left;
}
#right-self-adaption{
background-color: #cccccc;
border: 2px solid #333333;
width: 70%;
height: 300px;
float: left;
}
左栏设置宽度为20%，右栏设置宽度为70%，看上去就像一个左侧为导航，右侧为内容区的常见网页布局形式。
效果图：
二列右宽度自适应
XHTML:
<div id="left-right-self-adaption">左列</div>
<div id="right-right-self-adaption">右列</div></div>CSS:
/*2列右宽度自适应*/
#left-right-self-adaption{
background-color: #cccccc;
border: 2px solid #333333;
width: 100px;
height: 300px;
float: left;
}
#right-right-self-adaption{
background-color: #cccccc;
border: 2px solid #333333;
height: 300px;
}效果图：
二列固定宽度居中
XHTML:
<div id="layout-new-center">
<div id="left-center">左列</div>
<div id="right-center">右列</div>
</div>CSS:
#layout-new-center{
margin: 0px auto;
width: 408px;
}
#left-center{
background-color: #cccccc;
border: 2px solid #333333;
width: 200px;
height: 300px;
float: left;
}
#right-center{
background-color: #cccccc;
border: 2px solid #333333;
width: 200px;
height: 300px;
float: left;
}效果图：
三列浮动中间列度自适应
XHTML:
<div id="left-three">左列</div>
<div id="center-three">中间</div>
<div id="right-three">右列</div>CSS:
/*3列浮动中间列度自适应*/
#left-three{
background-color: #cccccc;
border: 2px solid #333333;
width: 100px;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
}
#right-three{
background-color: #cccccc;
border: 2px solid #333333;
width: 100px;
height: 300px;
position: absolute;
top: 0px;
right: 0px;
}
#center-three{
background-color: #cccccc;
border: 2px solid #333333;
height: 300px;
margin-left: 104px;
margin-right: 104px;
}
效果图：
高度自适应
对#left对象设置了height:100%，同时设置了html和body的height:100%,这是高度自适的关键。
一个对象的高度是否可以使用百分比显示，取决于对象的父级对象。
在默认状态下，浏览器并没有给body一个高度属性，所以需要给body设置了100%，然后子级对象的height：100%便起作用了。
给html对象也进行设置100%，是使IE与Firefox浏览器都能够实现高度自适应。
XHTML:
<div id="left-three">左列</div>CSS:
html,body{
margin: 0px;
height: 100%;
}
#left{
background-color: #cccccc;
width: 300px;
height: 100%;
float: left;
}
效果图：
