值得注意的是里面的空格不能以 代替（最少要有一个软空格）
用CSS floats创建三栏页布局
CSS 三栏页布局是不是CSS中最常用的一个布局方式，希望通过本篇您可以运用自如。三栏布局是目前最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。
基本方法
基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。
三栏布局的一个例子
请看看用本文所介绍的技术进行三栏布局的例子。这个例子用鲜艳的颜色来区分布局的各个div。下面是XHTML代码：
＜body＞
＜div id="header"＞
??? ＜h1＞Header＜/h1＞
＜/div＞
＜div id="left"＞
??? Port side text...
＜/div＞
＜div id="right"＞
??? Starboard side text...
＜/div＞
＜div id="middle"＞
??? Middle column text...
＜/div＞
＜div id="footer"＞
??? Footer text...
＜/div＞
＜/body＞
下面是CSS代码：
body {
??? margin: 0px
??? padding: 0px
}
div#header {
??? clear: both
??? height: 50px
??? background-color: aqua
??? padding: 1px
}
div#left {
??? float: left
??? width: 150px
??? background-color: red
}
div#right {
??? float: right
??? width: 150px
??? background-color: green
}
div#middle {
??? padding: 0px 160px 5px 160px
??? margin: 0px
??? background-color: silver
}
div#footer {
??? clear: both
??? background-color: yellow
}
代码说明
HTML代码中各部分出现的顺序是非常重要的。左栏和右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上（屏幕两侧），并让中栏的内容将“流”入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下面而不是中栏的旁边了。
div#header和div#footer样式（style）中的clear:both申明用来确保这浮动部分不会占据标题和页脚的空间。div#header样式中的padding:1px申明用来消除页头背景色中的异常边，如果padding设置为零，那么在Netscape浏览器中就会看到这个异常。
div#left样式中的float:left申明是用来把左栏挤压到左侧。width:150px申明用来设置栏的固定宽度，不过你也可以把它的宽度设置为其它具体值。类似的，div#right样式中的float:right申明用来把右栏div挤压到右侧。在本例中，float把左栏和右栏完全挤压到浏览器窗口的左边缘和右边缘。然而，如果这些div被其它div包含，那么float将会把它们挤压到包含它们的div的边缘。
在div#middle样式中，clear申明允许中栏的内容“流淌”在两个边栏之间。padding:0px 160px 5px 160px申明设置了到左栏和右栏的填充，这样允许150象素宽度的栏div，在加上10象素的间距。
这个例子非常粗糙和简单，但是它很好的演示了用浮动div来创建三栏液态布局的边栏这一基本技术。
参考: http://cache.baidu.com/c?m=9f65cb4a8c8507ed4fece7631045813e4207dc362bd7a7543d87c21fd2735b36193da7ec302267558e9a61375ff21c41fdf14230775464d5c689ce5ddccdd46868df3034745edb0054b163b8ca30749d61875aead81896cd8641e2afa2d0db2420bc250e6d80f38a5a07008f32b0423eb5fddd5f142f07cced2713f94e0758885342a14689bc622f45&p=ce66c64ad6d914ff57e88c211e&user=baidu#baidusnap0
-----------------------------------------------------------------------
这种用Html代替图片的做法，显然要比任何图片的方式都要少占用带宽资源。不过，表格的方法对于如下这种统计图就无能为力了：
联想到CSS的Box（容器）模型和它提供的定位属性，不难想象到，这样的统计图表应该可以使用CSS的方式来完成。
下面，我们就来介绍这种柱状统计图的CSS画法。
以第13次CNNIC互联网调查中的数据为例子，这次调查中，发现，66.1%的网民在家里上网，43.6%的网民在单位上网，其次是网吧、网校、网络咖啡厅（20.3%），以及学校（18.4%）。
要画出类似左边的样子，首先需要一个作为背景的框，然后是四个矩形的柱子，可以使用Div，代码如下：
<div class="outline">
<div class="title">网民上网地方比例</div>
<div class="home"> </div>
<div class="work"> </div>
<div class="biz"> </div>
<div class="school"> </div>
</div>
其中，加入 这个空格，是因为作为数据块来标示的这些Div本身不包含任何东西，要让它具有容器的样子，则需要随便填写什么
参考:http://cache.baidu.com/c?m=9d78d513d9951aeb4fece4697b16c0101f43f0122ba7d2027ea4cf18d2264f060738ece161645213d2b6617a44ea0c4bea876a296b5476ebdadf883d8ce6cd3569df766e671cf03073b204afc94420c7209059e3ac13e1bef43891abc5d3a80e15950d&p=ce6ec54ad28312a058fc8c2916&user=baidu#baidusnap0
