クロスブラウザの3列レイアウト

Question

私は、3つの列を持つ1つの行を持っていると言います - 左右のいくつかのボタンと流体の中間の幅。

中央の列の内容が中央の列の領域に達すると、オーバーフローが隠されます。

このソリューションはFirefoxでもうまくいきますが、OperaとIE6の出力は大きく異なります。予想通り、すべてのこの1行に示されているFirefoxの上

<div style="width:/fluid/"> 
    <input type="image" src="img1.png" style="margin: 4px 0 0 5px; float: left;"/> 
    <input type="image" src="img2.png" style="margin: 4px 5px 0 0; float: right;"/> 
    <input type="image" src="img3.png" style="margin: 4px 5px 0 0; float: right;"/> 
    <input type="image" src="img4.png" style="margin: 4px 5px 0 0; float: right;"/> 
    <div style="margin: 0pt 68px 0pt 26px;"> 
     <p style="margin: 0; cursor: pointer; overflow: hidden;">abcdefghijklmnopqrstuvxy</p> 
    </div> 
</div> 

- 左のボタン一つ、右に3つのボタン、およびコンテンツの可視部分は、DIVコンテナの幅に依存します。

オペラの場合 - 1行に収まらないコンテンツの一部は、次の行に続きます。

IE6では、ボタンは最初の行にあり、コンテンツは次の行に全長で表示されます。

Answer 1

http://www.alistapart.com/articles/holygrail