跨浏览器三列布局

Question

可以说我有一列三列 - 左侧和右侧的一些按钮和流体中间宽度。

如果中间列的内容超出中间列的区域，则应该隐藏溢出。

该解决方案在Firefox上运行良好，但Opera和IE6的输出大不相同。在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> 

- 左边一个按钮，右侧的三个按钮，并对其内容的可见部分依赖于容器的div的宽度。

On Opera - 不适合一行的内容的一部分在下一行继续。

在IE6上 - 按钮位于第一行，内容显示在下一行，全长。

Answer 1

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