CSS一列布局

一列固定宽度

#layout{

height:300px;
width:400px;
background:#99ffcc;
}

固定列宽度居中

在IE6及以上版本和标准的浏览器中，当设置一个盒模型的margin为auto时，可以让这个盒模型居中。

#layout {

height: 300px;
width: 400px;
background: #99FFcc; margin: auto; }

一列自适应宽度
自适应宽度是相对于浏览器而言，盒模型的宽度随着浏览器宽度的改变而改变，这时要用到宽度的百分比。当一个盒模型不设置宽度时，它默认是相对于它的父元素显示的，此处是body元素。

#layout {

height: 300px;
background: #99FFcc;
}
白边是由于body默认的外边距造成的，当我们不用任何样式进行定义时，body，h1-h6,ul等元素默认有外边距或其他样式。我们增加一项
body{
margin:0;
}
白边就没了。

一列自适应宽度居中
body{
margin:0px;
}
#layout{
margin:auto;
height：300px;
background:#99ffcc;
width:80%;
}

一列 两至多块布局
一般网站整体可分为上中下结构，即 头部，中间主体，底部。我们用三个块级元素来划分。
header，content，footer

代码如下：
body { margin:0; padding:0;}

#header {

margin:5px auto;
width:500px;
height:80px;
background:#9F9;}

#main {

margin:5px auto;
width:500px;
height:400px;
background:#9FF;}

#footer {

margin:5px auto;
width:500px;
height:80px;
background:#9f9;
}

原网址：十天学会Div+CSS之一列布局