Min height and min width

Internet Explorer 6 is the only mainstream browser that doesn't understand min-height and min-width. When the day finally arrives that we do not have to support Internet Explorer 6 we can use basic CSS such as the following.

#some_div { min-height:400px; } #another_div { min-width:400px; }

But until that day arrives, we need to support Internet Explorer 6. This is done by creating 3 CSS rules instead of the one.

  1. Set min-width which all browsers understand except for Internet Explorer 6
  2. Set width:auto!important which all browsers understand except for Internet Explorer 6. What the important attribute does is say that this width is the most important and should be used over all others that are set
  3. Set width to the min-width value. This will only be recognised by Internet Explorer 6 as it did not understand the previous statement

#box { min-width:500px; width:auto!important; width:500px; }

The above statement works as internet explorer 6 will automatically overflow our elements once it becomes greater that 500px. Therefore the above creates min-width and min-height for all browsers.