单列变双列css_如何使用以下HTML代码实现双列布局？

我似乎无法让我的CSS在IE中正常工作(我正在使用IE 8)，并且我希望有人能够就此分享一些意见。如何使用以下HTML代码实现双列布局？

这里是我的向上兼容HTML代码： -

This is some text

我想是有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