Answers:
希望我正确理解了您，看看这个：http : //jsfiddle.net/EAEKc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>我发现这样做的最交叉兼容的方法不是很明显。您需要从第二列中删除浮点数，然后对其应用overflow:hidden。尽管这似乎隐藏了div之外的任何内容，但实际上迫使div留在其父级之内。
使用您的代码，这是如何完成代码的示例：
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
希望这对遇到此问题的任何人都是有用的，这是我在尝试使其适应其他分辨率之后，最适合我所建站点的方法。不幸的是，如果您还在div内容后加上右浮字，这将不起作用，如果有人知道通过IE良好的兼容性使其正常工作的好方法，我将非常高兴听到它。
display: flex;现在，Flexbox模型已经得到了广泛的实现，我实际上建议您改用它，因为它可以使flex布局具有更大的适应性。这是一个类似于原始的简单两列：
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>
这是一个三列，中间列的宽度灵活！
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>
.content .right{
overflow: auto;
background-color: red;
}
+1为Merkuro，但如果浮动尺寸更改，则固定边距将失败。如果您在右侧使用上述CSS，div则会随着左浮动尺寸的变化而很好地改变尺寸。这样有点灵活。在这里检查小提琴：http : //jsfiddle.net/9ZHBK/144/
overflow: hidden并overflow auto导致相同的行为。我也认为人们欣赏小提琴。
浮动的元素将从常规流布局中移出，并且块元素（例如DIV）不再跨越其父元素的宽度。在这种情况下，规则会更改。无需重新设计轮子，而是访问此站点以获取一些可能的解决方案来创建您要使用的两列布局：http : //www.maxdesign.com.au/presentation/page_layouts/
具体来说，是“液体两列布局”。
干杯!
如果有人感兴趣并且不喜欢“浮动”，这是HTML 5的更新解决方案。
在这种情况下，表格效果很好，因为您可以为表格和表格单元格设置固定宽度。
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596/ 来自@merkuro的原始源代码
这种用法可以解决您的问题。
width: calc(100% - 100px);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
float: left;
width: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>根据merkuro的解决方案，如果您想最大化左侧的解决方案，则应使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
margin-right: 100px;
background-color: green;
}
.content .right {
float: right;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
<div class="left">
<p>Hi, Flo!</p>
</div>
</div>
</body>
</html>尚未在IE上进行测试，因此在IE上看起来可能坏了。
嗨，有一种简单的方法，在正确的元素上有溢出隐藏方法。
.content .left {
float:left;
width:100px;
background-color:green;
}
.content .right {
overflow: hidden;
background-color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Menu</title>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo! I am Left</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
<p> It done with overflow hidden and result is same.</p>
</div>
</div>
</body>
</html>