css - Cross-browser three column layout -


Let's say that I have a line with three columns - some buttons on the left and right side and some liquid medium width.

If the content of the middle column reaches the center of the middle column then the overflow should be hidden.

This solution works well on Firefox but production of Opera and IE6 is very different.

  & lt; Div style = "width: / liquid /" & gt; & Lt; Input type = "image" src = "img1.png" style = "margin: 4px 0 5px; float: left;" /> & Lt; Input type = "image" src = "img2.png" style = "margin: 4px 5px 0 0; float: correct;" /> & Lt; Input type = "image" src = "img3.png" style = "margin: 4px 5px 0 0; float: correct;" /> & Lt; Input type = "image" src = "img4.png" style = "margin: 4px 5px 0 0; float: correct;" /> & Lt; Div style = "margin: 0pt 68px 0pt 26px;" & Gt; & Lt; P style = "margin: 0; cursor: indicator; overflow: hidden;" & Gt; ABCDGGILMNOPCrustWiki & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

On Firefox all this is shown as one line - expected - one button on the left, three buttons on the right, and the visual portion of the content, depending on the width of the divisor container .

On Opera - a part of the content which does not fit in a row, continues on the next line.

On IE 6 - Buttons are on the first row, and the content is shown with the full length in the next line.


Comments

Popular posts from this blog

c++ - Linux and clipboard -

Visual Studio 2005: How to speed up builds when a VSMDI is open? -

booting ubuntu from usb using virtualbox -