css - CSSFluid-同じ高さの列を持つ固定レイアウト

Question

私はCSSを初めて使用するので、これが本当にばかげた質問である場合はご容赦ください。しかし、問題は、私は過去48時間これを試してきましたが、それでも正しく理解することができません。私が欲しいのはこのためのCSSレイアウトです：

2列、左流体、右固定（300px）
両方の列は同じ高さで、右側の列は全体に背景色があります。
100pxの高さのヘッダー。
300pxの高さのフッター。
全体が中央位置のコンテナにカプセル化されています。このコンテナの最大幅は960ピクセル、最小幅は480ピクセルです。画面が480px未満の場合は常に、固定された右側の列が左側のコンテンツ列の下に垂直に表示される必要があります。
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のクロスブラウザCSSを使用した高さの等しい列の記事は、この問題を解決するためのフレームワークを提供するはずです。彼は、流体カラムと固定カラムの両方のソリューションを持っています。組み合わせることができると思います。