Cross-Browser drei Spaltenlayout

Question

Lets sagen, ich habe eine Zeile mit drei Spalten - einige Tasten auf der linken und rechten Seite und flüssige mittlere Breite.

Wenn der Inhalt der mittleren Spalte in den Bereich der mittleren Spalte reicht, sollte der Überlauf ausgeblendet werden.

Diese Lösung funktioniert gut mit Firefox, aber die Ausgabe von Opera und IE6 ist sehr unterschiedlich.

<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> 

Auf Firefox all dies auf einer Zeile wie erwartet gezeigt wird - eine Taste auf der linken Seite, drei Tasten auf dem rechten Seite, und den sichtbaren Teil des Inhalts ist abhängig von der Breite der div-Container.

Auf Opera - ein Teil des Inhalts, der nicht in eine Zeile passt, wird in der nächsten Zeile fortgesetzt.

Auf IE6 - die Schaltflächen sind in der ersten Zeile, und Inhalt wird in der nächsten Zeile mit voller Länge angezeigt.

Answer 1

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