Today I discovered how to make min-height work in Internet Explorer

[brothercake]

And it's so simple, it's galling!

Internet Explorer misinterprets the normal height property - if an element has more content than there's room for, IE expands the container, when what it should do is allow the content to flow outside. That much we already know.

But then I realised - that interpretation of height is identical to the correct implementation of min-height!! So all you have to do is this:

element { min-height:100px; }
* html element { height:100px; }

Unless I've missed something really stupid, that's it - that's all it takes And it should work identically for width as well.

Check it out on this dev site: http://cc121.karovastore.com/ - the five colored boxes in the middle

[gohankid77]

I'm assuming that the second one is for IE?

[brothercake]

Yes - the "star HTML" hack as it's known exploits a parsing bug that only exists in IE (5+6 win and mac). "*" means "any element", but "html" is always the root node of an HTML document, so logically it cannot descend from another element - that rule makes no logical sense, and shouldn't be applied at all. But IE does apply it - hence you can use it safely to apply CSS just for IE.

[mindlessLemming]

Don't forget that Safari will need display:table-cell; on the element to get the same result (care of Anne Van Kesteren via Liorean)

Although it's a heap of extra script, I use this method to get support for min/max height and width in IE5+. Though I only use that one in designs where it's really needed and import it from within a conditional comment so as to save others the bandwidth. It may sound like a lot of extra hassle, but fluid width columns with an 'em' based max-width look great and are highly readable at any resolution