唉，我怎么会认为它是不可能完成的任务呢～···
要求：1.完成如上布局；2.#main宽度自适应；3.代码顺序#header、#main、#sidebar、#footer。
如果#sidebar能放在#main前面当然就非常简单了～···但是不可以～···
最终解决方案：（查看演示）
<!--css-->
#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:400px; margin-left:210px; background:#999;}
#sidebar{float:right; width:200px; margin-top:10px; height:450px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}
<!--css-->
<!--xhtml-->
<div id="center"></div>
<!--xhtml-->
囧～···鸡蛋，白菜，鞋底板～···来的更猛烈些吧～···
还有其他方法么？欢迎补充～···
BTW：来两个三列的1、2
最近一直和表格打交道，发现各浏览器对表格边框的处理不尽相同，以致影响到最终的显示。这一问题主要是Firefox与非Firefox浏览器对表格边框处理上的差异。
可简单地用以下表达式表示（tableWidth为表格的视觉上的实际宽度，width为定义宽度）：
FF：tableWidth = width+borderWidth/2
非FF浏览器：tableWidth = width;
测试l链接
FF中可能导致的问题
补充：尽管FF中表格在视觉上的宽度大于定义宽度，但其在文档中的实际宽度仍是最初的定义宽度，故其不会在文档中占用其定义大小外的空间。测试链接
table-layout
语法：
table-layout : auto | fixed
参数：
auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关
隐藏对象内的多余文本，一般做法：
selector{width:*px; white-space:nowrap; overflow:hidden;} 但是这段代码用在td上不会生效，单元格依然会被撑开～···
解决办法：同时为其table定义width:*; table-layout : fixed OK：多余文本已经被自动隐藏。
首先声明CSS中并没有“block-inline”这一属性，只有inline-block。inline-block属性将对象呈现为内联对象，但其文本呈递为块级对象，可以简单地理解为被inline-block定义后的对象是一个可以与其相邻的内联对象同行显示的块级对象。
block-inline则反之，对外变现为块级对象，其内文本表现为内联对象。实际应用中，这种情况是经常遇到的。比如想将一个链接单行显示（可以使用display:block，也可以使用<br/>，还可以在其外层嵌套块级容器，但这些明显不是最好的方法），但是又不想链接的感应区域是整个行，实际应用见本站存档页。
具体解决方法如下：
.block-inline{
display:block; /*对外呈现为块级对象*/
width:0; /*小于正常宽度即可*/
white-space:nowrap; /*单行显示*/
}
原理也就是在将对象呈现为块级元素后，定义小于正常宽度的宽度值，再强制文本单行显示以撑开到正常鼠标感应宽度～···
