“min-height” hack for IE (Internet Explorer)

.box2 {
   background:yellow;
   min-height:100px;
   height:100px;
   }
div[class] .box2 {
   height:auto;
   }
<div class="someclass">
   <div class="box2">...</div>
</div>
This solution makes the box at least 100px high in Win/MSIE, Opera and any Gecko-based browser (Mozilla, Firefox, Camino etc.). Mac/MSIE has a bug — the parent box is stretched if it’s height is set to auto. The simple solution is to cover the box with another one. The outer box will define border, background etc., the inner one will use the min-height hack. (But Mac/MSIE is almost dead…) Some browsers stay out of this hack — especially Konqueror/Safari. Hopefully the min-height will be supported in Safari’s next release… (updated: min-height is now supported in Safari).

http://www.wellstyled.com/css-minheight-hack.html

Advertisements