Min-height and min-width in IE

From CSS Standards FAQ

Jump to: navigation, search

The properties min-height and min-width are not supported by IE6 except for the <tr>, <td> and <th> elements.

Min-Height

Luckily IE6 will treat height as min-height. You can therefore override the height with min-height property values in an IE only CSS sheet using conditional comments or a hack.

#foo {
    min-height: 200px;

    height: auto!important; /* for sane browsers, keep it as default */
    height: 200px; /* IE < 7 will forget about !important and set 200px for height */
}

Note: Careful when using overflow property along with min-height hack, IE will treat height as the "real" height, see JavaScript solution on Min-Height Workaround if you can't avoid the use of overflow.

Min-Width

Many people believe that IE < 7 will treat width as min-width, however, it is NOT the case as can be seen on the demo test page. In standards compliant browsers (i.e. FireFox) when the width of the browser will exceed 800 pixels (demo has min-width: 800px;) the element will continue to fill the entire browser's width, but in IE it will stop as soon as it will reach 800 pixels.

However, the expanding box model bug will cause IE to expand the element when the child elements force it to. See Expanding Width Bug for more information on this.

The MinMax script can add support for min-width. For those of you who would rather add a bunch of divs instead of using JavaScript solution feel free to try out WebReference.com Min-Width workaround (the working demo, for which I failed to find a link for on the page is at: http://www.webreference.com/programming/min-width/examples/demo6.html and http://www.webreference.com/programming/min-width/examples/demo8.html )

Further Reading

Personal tools