演示示例，可以采用liveweave工具。地址：http://liveweave.com
更多牛逼的布局思想，可以参考老外的一个demo：http://blog.html.it/layoutgala/
一.列等高布局。
1.伪列布局
看看国内的w3school 首页：http://www.w3school.com.cn/，
代码示例：
html：
<div id="wrapper"> <div id="navsecond"><h1>左侧栏</h1><p style="height:500px;"></p></div> <div id="maincontent"><h1>中间栏</h1></div> <div id="sidebar"><h1>右侧栏</h1></div> <div id="footer" style="clear:both; height:80px; border:2px solid #666; background:#eee; "><h1>footer</h1></div> </div>
css：
* { margin:0; padding:0; } #wrapper { margin: 0 auto; width: 966px; background: transparent url('http://www.w3school.com.cn/i/site_wrapper.gif') top left repeat-y;} #navsecond { float: left; margin: 0 0 0 12px; width: 150px; _display:inline; } #maincontent { float: left; width: 637px; } #sidebar { float: left; width: 150px; }
原理很简单，给撑开的父包含框#wrapper定义背景图平铺即可。
缺点：
- 列加border会崩溃
- 不适合液态布局
需要注意的是，这并没有解决一个最根本的问题，也就是让两列真的等高。测试加上border便知。
从灵活性上来讲，这个布局技巧很尴尬，加border，不要border，就很费事。假如，我需要给两列都加上border，怎么办？
两边的border需要wrapper的背景图提供，而上下的border需要额外的html结构来模拟。蛋疼ing~~~。
还有一点，该布局是针对固定宽度布局而言，液态布局就崩溃了。
2.负边距布局。
html:
<div id="wrapper"> <div id="main"> <h1>主栏</h1> <p style="height:800px;">内容填充</p> </div> <div id="sider"> <h1>侧边栏</h1> </div> <b id="footer"></b> </div>
css:
* { margin:0; padding:0; } #wrapper { width:960px; margin:0 auto; overflow:hidden; zoom:1; } #sider, #main { padding-bottom:9999px; margin-bottom:-9999px; } #main { float:right; width:600px; border:2px solid blue; } #sider { float:left; width:300px; border:2px solid green; } #footer { display:block; width:960px; margin:0 auto; height:2px; overflow:hidden; background:url('border.png') no-repeat;/*对两列底部border的补充*/ }
缺点：
- border底部会崩溃，padding太大了
- 不适合定位，两列的底部很深
尽管采用了负边距和正填充技术，但是，依然没有解决最核心的问题，就是两列高度依据最高的一列。
这个技术的高度不是最小高度，所以，还是带来了一系列的问题。相比伪列技术，灵活性更好些。
边框问题比较好解决。
3.css3列等高实现：
html:
<div id="wrapper"> <div id="main"> <h1>主栏</h1> <p style="height:800px;">内容填充</p> </div> <div id="sider"> <h1>侧边栏</h1> </div> <div id="extra"><h1>多余的</h1></div> </div>
css:（只写了-webkit 内核的样式，mozilla内核的，自行添加）
* { margin:0; padding:0; } body { font:12px/1.5 arial; } #wrapper { width:1200px; margin:0 auto;display:-webkit-box; display:box; } #main { -webkit-box-flex:3; box-flex:3; background:#eee; margin:0 10px; -webkit-box-ordinal-group:2; border:2px solid green; } #sider { width:300px; background:#eee; -webkit-box-ordinal-group:1; border:2px solid #ddd; } #extra { -webkit-box-flex:1; background:#eee; -webkit-box-ordinal-group:3; border:2px solid #900; }
技术核心是父级包含框使用display:box，其内部列就等高啦。然后使用 box-ordinal-group进行位置显示排序。
缺点是，opera和IE9不支持啊。蛋疼~~~~
4.display:table-cell：
就是模拟表格。IE6,7不支持。另外，表格的显示不是block，在定位上需要额外的嵌套。不过，实现的的确是两列等高。
IE6,7死了的那天，这个技术就放光芒啦。
二.一列固定，一列自适应布局
1.定位技巧：
html:
<div id="wrapper"> <div id="main"> <h1>主栏</h1> <p style="height:800px;">内容填充</p> </div> <div id="sider"> <h1>侧边栏</h1> </div> </div>
css:
* { margin:0; padding:0; } body { font:12px/1.5 arial; } #wrapper { margin:0 10px; position:relative; } #main { position:absolute; left:220px; top:0; right:0; background:#eee; } #sider { width:200px; min-height:400px; background:#808000; }
这个技巧是存在使用上的局限性的。footer我放哪里啊？
wrapper高度没法自适应，因为main已经脱离了文档流。所以，你在博客园的首页，就可以看到，首页虽然用了此布局技术，但是他的footer位置可是在main里。
2.浮动和负边距:
这个技术应当算作比较成熟的技术了。稳定，稳定。不好的地方就是需要多一层标签。
html:
<div id="wrapper"> <div id="main"> <div class="inner"> <h1>主栏</h1> <p style="height:800px;">内容填充</p> </div> </div> <div id="sider"> <h1>侧边栏</h1> </div> <div id="footer"> <h1>底部填充</h1> </div> </div>
css：
* { margin:0; padding:0; } body { font:12px/1.5 arial; } #wrapper { min-width:1024px; overflow:hidden; } #main { width:100%; float:left; margin-left:-200px; } #main .inner { margin-left:200px; min-width:800px; background:#eee; } #sider { width:200px; float:right; min-height:400px; background:#808000; } #footer { clear:both; height:80px; background:#ccc; }
核心就是，父层偏移负边距，子层再偏回来。这个布局用的最多，也好用。嘎嘎~~~
3.BFC技巧：
使用BFC技巧来做这个布局，对于结构的先后次序是有要求的。所以，此方法可以了解下，不适合大布局，小地方经常用到。
html：
<div id="wrapper"> <div id="sider"> <h1>侧边栏</h1> </div> <div id="main"> <h1>主栏</h1> <p style="height:800px;">内容填充</p> </div> <div id="footer"> <h1>底部填充</h1> </div> </div>
css:
* { margin:0; padding:0; } body { font:12px/1.5 arial; } #wrapper { min-width:1024px; overflow:hidden; } #main { min-width:700px; overflow:hidden; margin-left:200px; background:#eee; } #sider { float:left; width:200px; float:left; min-height:400px; background:#808000; } #footer { clear:both; height:80px; background:#ccc; }
好啦，就讲这么多，三列的布局可以由此扩展。另外，可以参考射雕提出的双飞翼布局。
以上的代码只是在chrome下测试了，其他浏览器是否存在bug，自行修复，重在思想。