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

I am trying to accomplish this:

但我很难让两个中间的 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: 两者如果你尝试这样做，这一点尤其重要，因为不使用它会导致页脚混乱，因为包装纸不能正确垂直拉伸。但马克在下面提供了一个我认为更好/更干净的替代方案。

这不会按预期工作吗？

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