2个浮动柱子推动页脚

Question

我的网页有一个小问题，我的网页有两列，左右浮动，右列有多个h1和p标签，里面有内容。

<div id="wrapper">
        <div id="left">...</div>
        <div id="right">
          <h1>...</h1>
          <p>...</p> 
        </div>
    <div style="clear: both;"></div>
    <div id="footer">...</div>
</div>

如果左栏没有内容，右栏就会把页脚往下推，并改变包装纸的高度。但是我对左栏有一个问题。当内容较多的时候（高度比右栏大），左栏的内容没有推倒页脚，而是显示在页脚之上，改变了整个主体的高度，而不是改变包装纸的高度。

 #wrapper {
    width: 980px;}
    #left {
            float: left;  
            width: 750px;
            position: absolute;}
    #right {
    float: right;
    width: 300px;}

如果没有左div的绝对位置，右div就会被推到左div下面。

Answer 1

我想这可能会有帮助...

#wrapper {
    width: 1050px; <----
}
#left {
    float: left;  
    width: 750px;
}
#right {
    float: right;
    width: 300px;
}

你的包装体宽度需要等于或大于左右合计。

另外，你可能会注意到你的 h1 和 p 标签会造成一点上边距--不知道你是否是这个意思，但你可以通过以下方法来解决这个问题。

h1,p {
    margin: 0;
}

或者直接应用到整个机身。

body {
    margin: 0;
}

Answer 2

Patosai的答案是正确的，我不知道你的这个代码的用例是什么。

但为了确保 <div id="left"> 和 <div id="right"> 永不倒塌，你可以尝试使用百分比。

#wrapper {
    width: 100%;
}
#left {
    float: left;  
    width: 75%;
}
#right {
    float: right;
    width: 25%;
}

请看这里的一个例子 http:/codepen.ioyoomeepenKuzHB