两个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 ="清晰: "如果你尝试这个是非常重要的,因为不会使用那个因为包装物不能垂直拉伸而使得页脚陷入困境.但Mark提供了我认为更好的东西/清洁剂替代下面.

Answer 1

这不会按预期工作吗？

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