唉，我怎么会认为它是不可能完成的任务呢～···

要求：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