Cross-browser min- and max-width in pure HTML + CSS

Published on September 07, 2009

Cross-browser min- and max-width in pure HTML + CSS

    For a long time I wanted to share one interesting experience - namely, emulating the min and max-width properties without using expression and similar things. The harness may seem cumbersome, but its main plus is that it works. Plus, such things can be easily implemented using a template engine with one line of code.

    The gist of the trick is simple:
    ‹table› ‹tr› ‹td width = 1100› - maximum width
    ‹div width = 900 /› - spacer, minimum width

    And this is exactly the way the width is not in the table , but in the cell . Thus, the table will not be wider than 1100 (in this case), but if it is already, the scroller does not appear. Moreover, if the width of the working area is less than 900, the scroller will already be displayed.


    Tested under different OS in browsers:
    • Firefox: 3.5.2, 3.0.13, 2.0.0.16
    • IE: 8, 8 in 7, 6 mode
    • Opera: 10, 9.64, 9.2, 8.0
    • Safari: 4.0, 3.4
    • Chrome: 2.0.172.43

    PS The semantics of this, of course, are lame, but I thought it was better to use one binding, even cumbersome, than produce an implementation for IE6 ... Everything is at least straightforward here. In an extreme case, you can simply remove all the code under the optional comment and leave one Div with min- and max-width outside. UPD: Added this version to the list.
    PPS If it was already somewhere - I apologize, but I didn’t seem to see anything like it anywhere ...