title: Cross-browser three column layout
body: <p>Lets say I have one row with three columns - some buttons on left and right side and fluid middle width. </p>
  
  <p>If the contents of the middle column reaches over into the area of the middle column, the overflow should be hidden.</p>
  
  <p>This solution works well on Firefox but the output of Opera and IE6 is much different.</p>
  
  <pre><code>&lt;div style="width:/fluid/"&gt;
     &lt;input type="image" src="img1.png" style="margin: 4px 0 0 5px; float: left;"/&gt;
     &lt;input type="image" src="img2.png" style="margin: 4px 5px 0 0; float: right;"/&gt;
     &lt;input type="image" src="img3.png" style="margin: 4px 5px 0 0; float: right;"/&gt;
     &lt;input type="image" src="img4.png" style="margin: 4px 5px 0 0; float: right;"/&gt;
     &lt;div style="margin: 0pt 68px 0pt 26px;"&gt;
        &lt;p style="margin: 0; cursor: pointer; overflow: hidden;"&gt;abcdefghijklmnopqrstuvxy&lt;/p&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>On Opera - part of the content that doesn't fit into one row is continued on the next row.</p>
  
  <p>On IE6 - the buttons are on the first row, and content is shown on next row with full length.</p>