この猫にはさまざまなスキンがあります。 2つの列を作成し、それらの列の1つを別の2つの列レイアウトで分割することができます。または、3つのブロックコンテナを配置し、それぞれのコンテナを合計幅のパーセンテージにフロートさせることができます。つまり3列のレイアウトの場合、理論的にはそれぞれ33.33％の幅が必要になります（溝や余白をどのようにしたいかによって異なります）。
第3のについては、「柔軟なレイアウト」についてお話しします。つまり、ピクセルは静的な値なので、柔軟なレイアウトはピクセル幅では機能しません。つまり幅が200ピクセルだと言うと、コンテナやウィンドウの大きさや大きさに関係なく、常に200ピクセルです。
あなたがする必要があるのは、パーセンテージを使用することです。もちろん、適切なフレキシブルなレイアウトを行うには、ベースディメンションを作成する必要があります。だから、あなたはあなたが「最適なデザイン」と言う設計で固定する必要があります（私はその言葉を、本当の柔軟性と応答性のあるデザインが大部分を良く見せるようにゆるやかに使用しなければなりません）。
したがって、メインコンテンツエリア.wrapが1000pxになるようにデザインが設定されているとします。あなたは、黄金比を使用して2列のレイアウトが必要です。 http://en.wikipedia.org/wiki/Golden_ratio
基本的に、1つの列を618pxにし、もう1つの列を1000px - 618px = 382pxにします。
CSSの場合は、パーセンテージで設定する必要があります。パーセンテージを取得するには、親の幅を取得し、それを必要な幅で割ります。 （百分率用）
618px/1000px = 0.618×100 = 61.8パーセント（百分率用）
382px/1000px = 0.382×100 = 38.2パーセント
.left {
float: left;
width: 61.8%
}
.right {
float: right;
width: 38.2%
}
ジョセフSILBERは、正しいですは、右の列を浮動させるためにを必要としませんが、そうしないと、ボックスモデルがどのように動作し、浮動小数点の左の項目を囲むかについて、他の予期しない問題が発生する可能性があります。
1つの列を別の列の幅にオフセットするためのマージンを適用できますが、わかりやすく、ブラウザでのCSSの実装に問題がある可能性があります（IE6はサポートしていませんもはや、それをサポートする必要があるほど十分に訪問者が使用しています）。
また、％を扱う場合、丸め誤差が発生することに注意してください。一部のブラウザでは、「0.5％」を押したときに切り上げまたは上がります。これにより、フローティングされた列がコンテナ要素よりも1px大きくなるため、ラップすることがあります。したがって、安全のためには、おそらくラッピングのための1〜2ピクセルのバッファを提供するために、少し幅を削ってほしいでしょう。
一般的なアプローチは、たとえば10pxの左右の列の間に「空の」ガターまたはマージンを付けることです。そして、私たちのデザインで10pxのは、次のとおりです。
10pxの/ 1000px = 0.01 * 100あなたは今、各カラムから0.5％を取るか、または1列オフの完全な1％を取ることができ
= 1％（パーセント）です。私はちょうど後でやります。
.left {
float: left;
width: 60.8% /* removed 1% to give a gutter between columns */
}
.right {
float: right;
width: 38.2%
}
これで、いい安全ゾーンが得られ、丸め誤差を避けることができます。
また、％で作業しているので、レイアウトは流動的になります。 2つの列は、最小/最大ピクセル値に達するまでブラウザでサイズ変更されます。
また、流体/柔軟なグリッドを扱う場合はもちろん、他の考慮事項の多くは考慮に入れてありますが「clearfix」
<div class="wrap clearfix">
<div class="left">
<!-- content -->
</div>
<div class="right">
<!-- content -->
</div>
</div>
忘れないでください。
あなたができることの1つは、ホイールを再作成するのではなく、Yahoo!のようなCSSフレームワークを使用することですまたは青写真。私は彼らがこれらを内蔵し、堅牢なテストを受けていると信じています。
また、私はレスポンシブウェブデザインを読むことをお勧めします。それにはA List Apartの記事があります：http://www.alistapart.com/articles/responsive-web-design/とEthan Marcotte（この記事のもうひとつであり、ALAのウェブサイトから出版されている）の著書です。
本の唯一の欠点は、レスポンシブデザインの欠点をカバーしていないことと、クールな要因にもかかわらず、多くのビッグネームのウェブデザイナー/開発者が、デスクトップのウェブサイトのデザイン。
元の質問は流動的なデザインについてのみであり、メディアターゲットのサイズについては話していなかったので、少し話題にはなりません。
希望に役立ちます！
乾杯！
彼は固定幅の列を必要としましたが、あなたの答えではこれが許されません。 – Michael