以前实现某个网站的界面时候，需要实现这样一种界面布局：右栏固定，左栏自适应宽度。这貌似是一个简单的命题，但却内含玄机：

首先，因为界面显示速度的需要和seo的优化，不会用table去实现。

其次，要实现右栏固定，左栏自适应宽度的需求其实还不是难事，但是却隐含另一个难以解决的命题。

可将右栏的position设为absolute，并且设置其right和top值，就可以将其固定在右边同一个地方，而左栏则可以设置其margin-right为适当的数据，就可以使其宽度总是距离右边一定的距离，使右栏显示出来的同时，也满足了自适应宽度的需求。

不过，安排了左栏和右栏，接下来就会发现，哦，原来这网页还有一个底部呢。当左栏高于右栏的时候，底栏倒是没有问题，不过当左栏低于右栏的时候，底栏却依然坚定不移地追随左栏（右栏的position是absolute，底栏丝毫不能知道它的存在。即使底栏采用clear:both的样式，也丝毫对此起不了作用），从而导致右栏压住底栏的错误局面出现。

这个问题，在css层面上找不到好的解决方案，后来就只能采取js来解决了。最后，用js的方案还算是比较成功了，竟然没有人抱怨过底部遮挡右栏的现象。事实上，一旦用户把浏览器的JavaScript禁用了，我们的界面就有可能非常难看。

最近，又要实现这样的布局，而且更可怕的事情是，有时候右栏的长度还是变化的，这是，就需要利用调用那个调整底栏的位置。更有的时候，左栏的高度也是变化的，随着图片的不断下载，底栏的位置也需要不断地变化。这个问题，总是不断地考验我。

最后，总算勉强把大部分关于这个的问题都解决了，可是接下来马上又传来用户的抱怨：在chrome里边怎么经常有底部跑到中间的现象呢？我一看，可不，真的是这样。看来，还是需要从css角度来考虑才能彻底摆脱这个问题的纠缠。

经过一番终极搜索，终于找到了满意的解决方案：http://www.jb51.net/article/6585.htm。看罢，不禁替他拍案叫绝，这个思路真的是非常妙：

将一个div的宽度设为100%，然后设置其margin-left为负值（比如-200px），这样就将整个往左移动了一段距离，所以这个div里边的内容有一部分是看不到的。不过没关系，接下来在这个div里边再嵌入一个div，将其margin-left设为一个与外层div的margin-left数值相等的正值（比如200px），然后，在这个div里边的内容就都能被用户看到了。这样，一个始终距离右边一段距离（比如200px）的div就出现了，也就是我们想要的自适应宽度的左栏。
接下来，将左栏的float设为left，再加一个固定宽度（比如200px），float为left的右栏进来，这两个div就并排地显示在网页上了。
既然左栏和右栏的float都为left，那么底栏的clear设为both的话，就能始终停在高度最大的div（左栏或右栏）的下边了。

这样，就用纯css的手段解决了这个看似简单的问题了，成功了避免了js方案带来的复杂性。在这个解决方案中，将margin-left设为负值起了关键性的作用。实际上，在delicious的标签，以及百度空间首页的圆角矩形实现的方案中，都有用到margin为负值的方式来解决问题。不过，感觉这个还是用得最巧的。