單列變雙列css_如何使用以下HTML代碼實作雙列布局？

我似乎無法讓我的CSS在IE中正常工作(我正在使用IE 8)，并且我希望有人能夠就此分享一些意見。如何使用以下HTML代碼實作雙列布局？

這裡是我的向上相容HTML代碼： -

This is some text

Right content

我想是有div#column-content将被顯示在左側和嵌套div.toc要在右側div#column-content容器外部顯示。把它看作是一個雙列布局，但唯一的問題是我不能徹底改變這個HTML代碼來模仿我在網站中找到的一些更簡單的布局。是以，對我來說，唯一的解決方案就是把CSS弄得像我想要的一樣。

這就是我對我的CSS： -

#column-content {

width: 50%;

float: right;

}

#content {

margin: 0 15em 0 0;

position: relative;

border: 1px solid #ccc;

background-color:yellow;

}

div.toc {

margin:-3.3em -14em 0 0;

width:200px;

float:right;

border: 1px solid #ccc;

background-color:pink;

}

我得到我想要在Firefox的影響，所有的壁虎浏覽器。如果你在Firefox中檢視它，你可以看到黃色框和粉紅色框之間清晰的分隔。當我在IE中檢視它時，這些框似乎彼此粘在一起，我似乎無法實作框之間的差距。

這可能使這項工作在所有浏覽器？為了更清楚地了解HTML，div.toc始終位于div#content容器内。我可以在div#content之内添加更多HTML标簽，并調整CSS以使兩列布局工作。

非常感謝。

2010-07-13

limc

+0

僅供參考 - 我沒有看到在IE8的bug，而是IE7。你确定你沒有看到在IE7模式下的IE8渲染？ –

2010-07-13 15:37:25