noizZze

CSS: Min-height for IE

If you do any CSS coding for IE, you probably know that the beast arrogantly ignores the min-height property. Our best friends Firefox, Safari and Opera like it and so do we, CSS masters. For quite some time it was a burning question how to hack a stylesheet to make the ugly do what is required.

JavaScript Design PatternsThere were myriads of solutions with JavaScript, child selectors (that IE is far above of), and other wizardry. I was using them myself and they worked but so complex they were and hard to remember that I developed a habit to avoid min-heights – this powerful feature of CSS. Today I stumbled upon a small and elegant solution by Dustin Diaz, the author of a killer book on JavaScript Design Patterns. The solution itself looks as simple as this:

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Elegant and keeps everything together. It’s only a shame that it took me a couple of years to find it. Thanks Dustin!