CSS流体固定布局，高度相等的列

Question

我是CSS的新手，所以如果这是一个真正愚蠢的问题，请原谅我！ 但事实是，我在过去48小时内一直在尝试这种方法，但仍然无法做到正确。我想要的只是一个CSS布局：

1. 两列，左流体，右固定（300px）
2. 两列的高度相同，右列的背景颜色相同。
3. 一个100px的高度标题。
4. 一个300像素高的页脚。
5. 整个东西封装在中心位置容器中。 该容器的最大宽度为960px，最小宽度为480px。每当屏幕小于480px时，固定的右列应垂直位于左内容列的下方。
6. 应该可以在IE 7 +，Chrome，Safari，FF中使用。
7. 没有JavaScript（无法理解为什么会这样做）

我已经尝试（并且仍在尝试）这样做，但不知何故无法创建相同的高度列。我尝试了一些没有运气的在线CSS生成器。任何帮助，指针等都将非常感激。

编辑：

这是一个jsfiddle：'http：//jsfiddle.net/GKEmA/'我做了什么

Answer 1

您可能希望使用CSS表格布局 - 不是HTML表格标记，只是CSS属性。浮动并不是真正的布局设计。

http://www.w3.org/TR/2002/WD-CSS21-20020802/tables.html#q2

http://maketea.co.uk/2012/09/05/floats-are-dead-long-live-table-layouts.html

Answer 2

Matthew James Taylor的Equal Height Columns with Cross-Browser CSS文章应提供解决此问题的框架。他有流体和固定柱的解决方案;我相信他们可以合并。