两个div：一个固定，另一个伸展

Question

我正在努力实现这个目标：

但是我很难让两个中间的div好玩。如果我将它们都设置为相对数字（30％和70％），它“工作”但左侧div会随着用户更改浏览器窗口宽度而改变大小。

 #floatitleft{width:30%; float:left;}
 #floatitright{width:70%; float:left;}

我想要的是，如图所示

 #floatitleft{width:300px; float:left;}
 #floatitright{width:100%; float:left;}

但这导致“floatitright”最终落在floatitleft之下。如果我将它设置为70％它最终会到达“floatitleft”的权利，但是当我稍微更改浏览器大小时，它会再次在下面结束。怎么办？

更新： 最终我最终得到了：

#topper{
    height:100px;
    width:100%;
    background-color:blue;
}
#wrapperz{
    height:inherit;
    width:100%;
}
#wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;}
#wrapperz #floatitleft{
    width:300px;
    float:left;
}
#wrapperz #floatitright{
    margin-left: 300px;
    min-width:300px;
}
#bottommer{
    height:100px;
    width:100%;
    background-color:red;
}

将用作：

<div id="topper">
test
</div>

<div id="wrapperz">

<div id="floatitleft">
<p> Stuff </p>
</div>

<div id="floatitright">
<p> Stuff </p>
</div>

<div style="clear: both;"/>

</div> <!-- Close Wrapper -->

<div id="bottommer">
test
</div>

请注意，这不是正确的HTML，但它只是作为我的示例的解决方案。此外，“ div style =”clear：两者“是非常重要的，如果你尝试这个，因为不使用那个cuuse页脚搞乱，因为包装器没有正确地垂直拉伸。但Mark提供了我相信下面会有更好/更清洁的选择。

Answer 1

这不会按预期工作吗？

#floatitleft{
    width:300px;
    float:left;
}
#floatitright{
    margin-left: 300px;
}

Answer 2

在这里，我复制了你的照片：jsbin.com/ipexep/3（点击右上方的“在jsbin中编辑”查看和编辑来源）

我对于顶部和底部的高度，我为你拍摄的照片选择了高度。

注意：我是通过让每个部分完全定位并相应地设置其顶部，底部，左侧或右侧属性来实现的。

另外，请注意我的方法将匹配每个屏幕大小。我已经在你没有指定维度的每个区域中拉伸它。 （除了页眉和页脚需要一个高度尺寸，所以我猜到你没有指定）

Answer 3

您可以使用网格系统轻松完成此任务。

http://960.gs/

看一下，您可以选择12或16,24甚至更多列。您只需使用“grid_4”，“grid_8”等类，具体取决于您需要的宽度。