MainelyDesign.com Blog

CSS Min-Height Hack in Internet Explorer

Posted on 12/15/2009 at 10:18 am by Kevin Wentworth
Viewed 14,456 times | 0 comments

Another day of web developing with CSS and another day of needing a hack for IE6 and IE7.  This isn't really a hack so much as it's a method of ordering statements in your CSS declaration that yields a working min-height declaration in Internet Explorer.  Well, I guess it's a hack (but I hate using them).

CSS min-height will be used in browsers that support it

In web browsers that support the min-height property, it will be used.  In browsers that don't support it, height will be used.  For browsers that support !important, the height will be set to auto (with a min-height property).  For browsers that don't support !important, ah-hem IE6, the height will be set to a fixed height.

CSS min-height magic

The following code is what I used in my CSS style sheet to make my container div at least 879px tall. (I found it here)

IE6 is not !important

Two things work in our favor with how IE6 works- 1) it doesn't support !important and 2) the height, even though set to a fixed height, will still expand to the needed height of the container div.

Cheers,
-Kevin Wentworth