css - 容器泄漏到侧边栏

Question

帮助！我是新手，我需要一些快速的认真帮助！我有一个从dreamweaver 的模板（2 列液体）中使用的两列布局，我的大部分网站都准备好了，但是当我在浏览器中打开它时，它看起来完全不同。里面的文字和图片.container都漏到了.sidebar1。我将侧边栏设置为float: left，将容器设置为float: right，但我没有尝试过任何工作。请帮忙！今晚我需要解决这个问题！谢谢，麻烦您了！

.sidebar1 {
    float: left;
    width: 180px;
    background-color: #C7776C;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
    height: 100%;
    overflow: hidden;
}

.header {
    min-height: 160px;
    background-color: #E7C082;
}

.container {
    float: right;
    width: 993px;
    background-color: #FEF3C8; /* the auto value on the sides, coupled with the width, centers the layout */
    height: 100%;
    margin-top: 0;
    margin-bottom: auto;
    padding-bottom: 0;
    overflow: hidden;
    margin-left: 0;
} 

Answer 1

尝试将您的 CSS 代码更改为：

.sidebar1 {
    position: absolute;
    top: 180px;
    width: 180px;
    background-color: #C7776C;
    height: 100%;
    overflow: hidden
}

.header {
    min-height: 160px;
    background-color: #E7C082;
}

.container {
    position: absolute;
    top: 180px;
    left: 200px;
    width: 993px;
    background-color: #FEF3C8; /* the auto value on the sides, coupled with the width,       centers the layout */
    height: 100%;
    margin-top: 0;
    margin-bottom: auto;
    padding-bottom: 0;
    overflow: hidden;
    margin-left: 0;
} 

这是一个解决方案：http: //jsfiddle.net/pEdf2/2/