CSS扩展div右浮动div

Question

这个html标题有一个主div （紫色），它分为2个其他div，包含徽标（红色）以及其他一些信息正确的（绿色）

我对紫色有一个明确的解决方法，它使红色和绿色浮动为nicelly，两者都浮动到左侧。

问题在于我正在努力寻找一种方法让绿色适合整个宽度

在这种情况下，红色本身有199px固定宽度，绿色没有宽度声明

外部的紫色 div也没有固定的宽度，它是body的 65％，具有流畅的布局< / p>

所以我的问题是：如何使用css将绿色 div扩展到紫色 div的结尾？

我已尝试为绿色应用width:86%，但由于红色具有固定值，因此无效...

我认为也许有一些像display:table-cell/table-row这样的表格显示模式可以解决问题，但它们似乎都没有按我想要的方式工作。

如果你可以帮助我，那就太棒了:)。

Answer 1

这可能不太好，但它应该有效。

1. 绝对将红色div设置为0,0
2. 向紫色div
添加一个199px左侧的填充
3. 从红色和绿色div中删除浮动

Answer 2

只需在红色div上使用float: left即可。

http://jsfiddle.net/Jk5BE/2/

Answer 3

这是我对这类问题最喜欢的解决方案，奖励是它甚至不使用包装器，你可以添加其他列（虽然它看起来像你的情况需要换行，因为这看起来像一个标题）：

http://www.alistapart.com/d/holygrail/example_4.html

你可以非常简单地使用一个简单的浮点数：

http://jsfiddle.net/W3DEC/