divの2つの列 - どちらを使用するか1）マージンと一緒に浮動するか2）2つの浮動小数点

Question

コンテナに2つのdivがあります。 1つは左のバーであり、もう1つは右のバーです。私はいくつかのアドバイス/提案をどのメソッドを使用する必要があります。

方法1：

#container{ width:800px; margin:0 auto;} 
#leftbar{ float:left; width:200px; } 
#rightbar{ float:right: width:550px;} 

方法2：

#container{width:800px; margin:0 auto;} 
#leftbar{ float:left; width:200px; } 
#rightbar{ margin:0 0 0 210px; width:550px;} 

良い習慣である1アドバイスしてください。

Answer 1

に10pxのであろう一方、方法1であなたは、div要素の間では50pxの「ガター」を持っていますあなたが使用する2つのオプションのどちらが重要かは実際には関係ありません。ファイルあたりのバイト数が最小のものを使用してください。

コンテナのサイズが800pxを超える場合は、右側のバーをコンテナの右側に貼り付けますか？そうであれば、方法1だけが機能するでしょう。

ただし、両方のdivを左に浮動させる方法2と同じ効果を達成する別の方法があります。

Answer 2

意味的には、550 + 200〜= 800 pxの間に違いはありません。したがって、2つのdivがどのような場合に何をすべきかという手がかりはありません。コンテナは1000ピクセルです。

Answer 3

どちらかで結構ですが、あなたのコンテナは、常に常に常に800ピクセルになるだろうされている場合は、それが唯一の方法2

Answer 4

この段階では実際的な違いはありませんが、後で右端のCSSを完全に正しく維持するように変更することなく、後でコンテナの幅を変更できるので、 - 整列。

Answer 5

考えたくない堅牢なコードを使用する場合は、Yahoo User Interfaceや960 gridなどのグリッドベースのフレームワークを使用できます。

両方とも、さまざまなレイアウトを可能にするシンプルなCSS/HTMLフレームワークを提供しています。