如何實現複雜的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/