Question

Lets say I have one row with three columns – some buttons on left and right side and fluid middle width.

If the contents of the middle column reaches over into the area of the middle column, the overflow should be hidden.

This solution works well on Firefox but the output of Opera and IE6 is much different.

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

On Firefox all this is shown on one row as expected – one button on the left, three buttons on the right, and the visible part of the content depends on the width of the div container.

On Opera – part of the content that doesn’t fit into one row is continued on the next row.

On IE6 – the buttons are on the first row, and content is shown on next row with full length.

Answer 1

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