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}
* html #container {height:500px}
I’m not really sure why it works, but quite frankly, I don’t care.