- 2つの列

Question

CSS対テーブルについて大きな議論を開始しない - ここ

を行く私はあなたがここに見ることができるように達成したい2つの列レイアウトを持っている： http://jsfiddle.net/p5S5J/1/（縮尺通りではないが）

ここではdiv要素 http://jsfiddle.net/xyt2r/1/

で動作するようにレイアウトを得ることで私の試みは、基本的には、第二DIVは自動的にせずにそれだ（固定幅）親コンテナ内のスペースの残りの部分を埋めることを持っているが方法ですそのための幅を指定する必要がありますか？

UPDATE
@thirtydotは（私が少し編集した）この思い付いた：二DIVに隠された境界線を保つ：http://jsfiddle.net/thirtydot/xyt2r/5/ そのオーバーフローがいるようです。私はこのクローザーを見なければならないでしょう。なぜなら、クロムには奇妙なマージンアクションがあるようです。そして、私はこれがまだブードーではないと確信していません。なぜ、どのように動作するのかを誰でも気にしていますか？

Answer 1

私はコメントから適切な答えを出しています。私は少しCSSを改善しました。

を参照してください：http://jsfiddle.net/2WUgK/

私は、これはこれはIE7 +およびすべての最新ブラウザで動作しますまだブードゥー

ではありません確信していません。ブードゥー教は徹底的here :)

HTML説明します

<div id="my-container"> 
    <div id="column-1" class="layout">Hi!</div> 
    <div id="column-2" class="layout">Hello</div> 
</div> 

をCSS：

#my-container { 
    width: 200px; 
    border: 1px solid red; 
    padding: 6px 6px 6px 0; 
} 
#column-1 { 
    margin: 0 6px; 
    padding: 6px; 
    width: 60px; 
    float: left; 
} 
#column-2 { 
    padding: 6px; 
    overflow: hidden; 
} 
.layout { 
    border: 1px solid blue; 
    height: 120px; 
} 

Answer 2

あなたが探していたレイアウトを作成しました。 FloatとClear（css要素）の簡単な使用http://jsfiddle.net/louis002/ZWGfQ/10/

Answer 3

より多くのクロスブラウザフレンドリーであるように思わので、私はテーブルを使用して好みます。
しかし、私はそう私はdivタグを使用するときに私がやったことは「フロート」は左の左の列で、右

<div style="float:left;">left column</div> 
<div style="float:right:">right column</div> 

右の列をフロート私は幅を指定するよりも、このとのより良い運を持っていた、あなたを聞きます一部のブラウザでは正しく表示されない場合や、内部に動的なデータがあり、それがシフトすると、ブームが発生することがあります。あなたのページは現在すべての種類から外れています。