如何实现复杂的CSS布局？

Question

我有一个页面here。有一个内容面板和一个内容面板。我想将内容居中，并将内容面板推到右上角。这种行为已经起作用。

但是，布局不工作，因为我希望当页面收缩时。理想情况下，内容将被推到屏幕的右侧，并在内容和内容之间保持空白。但是，目前内容只是与内容重叠，而这并不是我想要的内容。

这样的布局可能，而不诉诸于JavaScript？

编辑：您可能会注意到页面边缘的滚动条。该滚动条是而不是的body的滚动条，但div#main的，原因是我不希望内容滚动页面。

Answer 1

我相信可以使用容器上的最小宽度属性来实现。预计ie6的问题。它不能识别最小宽度声明。

Answer 2

不只是最小宽度。我成功地实现通过执行以下布局：

对于#main附加（调整值以满足您的需要）：

• 最小宽度：950像素;

对于#contents添加：

• 浮动：右;
• margin-top：5px;
• margin-right：20px;

对于#contents ol删除：

• 位置
• 权
• 顶部

Answer 3

我建议你看一下YUI CSS网格布局，以实现在未来类似的问题。见http://developer.yahoo.com/yui/2/