Cross Browser Minimum Height (CSS)

A issue in my coding life is dealing with IE6 and making things work in it and Firefox (among other browsers). One thing I’ve learned to deal with successfully is putting minimum heights on DIVs. Some people may put a “spacer” image or DIV inside the parent DIV to stretch it out. The problem with that, is sometimes it can be buggy.

Here’s my solution:

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

Firefox will go off of the min-height property, however, IE will ignore that and will render the element according to the height property. The keyword auto will automatically extend the height depending on what is inside the div. The !important tag is used to set a higher priority to the height, so that it is executed when height of the page exceeds 500px.