min-height hack for IE

min-height hack for IE

By Jai--> Tags: CSS, Internet Explorer

If you do table-less designs with CSS, you may have noticed that using float on a DIV won’t push it’s container DIV down, so that the container is at least the same height as the floater. For example, on this Blog, the right navigation is formed using float:right but I was having problems when the text in this box was shorter than the content of my nav bar.In IE you can use height on the container, but in Firefox, once the content of that container is too long, it runs outside the borders. In Firefox, you can use min-height, but IE doesn’t recognize it. IE actually handles height the same way firefox handles min-height. So I found a “hack” to make it work in both browsers:

#container{min-height:500px}

#container{* min-height:500px} for ie7

* html #container {height:500px} for ie6 Note: in ie6 have no min-height property so we use height property.

I’m sure it works really fantastic....try it out...