css - 具有等高列的 CSS 流体固定布局

Question

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

两列，左流体，右固定（300px）
两列高度相同，右列始终具有背景色。
一个 100 像素高度的标题。
一个 300 像素高度的页脚。
整个东西封装在一个中心位置的容器中。该容器的最大宽度为 960 像素，最小宽度为 480 像素。每当屏幕小于 480 像素时，固定的右列应垂直位于左内容列的下方。
应该在 IE 7+、Chrome、Safari、FF 中工作。
没有 JavaScript（不明白为什么这需要它）

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

编辑：

这是一个 jsfiddle：'http://jsfiddle.net/GKEmA/' 我所做的

score 1 · Accepted Answer

您可能想尝试使用 CSS 表格布局——不是 HTML 表格标记，只是 CSS 属性。浮动并不是真正为布局而设计的。

score 0 · Accepted Answer

Matthew James Taylor 的Equal Height Columns with Cross-Browser CSS文章应该为解决这个问题提供了一个框架。他有流体和固定柱的解决方案；我相信它们可以结合起来。