html双列均匀布局,如何使用以下HTML代码实现双列布局？

我似乎无法让我的CSS在IE中正常工作(我正在使用IE 8)，我希望有人可以就此分享一些意见。

这是我愚蠢的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和所有gecko浏览器中获得了我想要的效果。如果您在Firefox中查看它，您可以看到黄色框和粉红色框之间的清晰分隔。当我在IE中查看它时，这些盒子似乎彼此粘在一起，我似乎无法实现盒子之间的差距。

这可以在所有浏览器中使用吗？为了更清楚地了解HTML，div.toc始终位于div#content容器内。我被允许在div#content中添加更多HTML标签并调整CSS以使两列布局工作。

非常感谢。