html - CSS 布局技巧

Question

我是第一次尝试使用 CSS 布局，我的 CSS 经验非常基础。我想要实现的是 2 列布局:左侧面板和内容。
我发现了这个:

#leftcontent
{
    position: absolute;
    left: 10px;
    top: 10px;
    width: 170px;
    border: 1px solid #C0C0C0;
    padding: 2px;
}

#centercontent 
{
    position: absolute;
    margin-left: 181px;
    border:1px solid #C0C0C0;
    top: 10px;
    //fix IE5 bug
    voice-family: "\"}\"";
    voice-family: inherit;
    margin-left: 181px;
}   

这在 firefox 中显示很好，但在 IE8 中内容超出了屏幕的右侧，我假设 #leftcontent 的长度。我该如何解决这个问题？

这可能是一个非常简单的修复，但我已经进行了试验并寻找了修复，但这应该可行。感谢您的帮助。

Answer 1

我建议将#leftcontent 元素向左浮动，然后设置#centercontent 元素的边距以进行补偿:

#leftcontent {
        float: left;
        width:170px;
        border:1px solid #C0C0C0;
        padding: 2px;
}

#centercontent {
        margin-left: 181px;
        border:1px solid #C0C0C0;
}