IE6 and the min-height CSS attribute

Tags: 

There's a really useful attribute in CSS called min-height that lets you set the minimum height an element should be displayed as; this is often used to make two boxes appear the same height even if one has less content than the other. Well, Firefox, Opera and Safari support it but Internet Explorer 6 and older don't. Luckily there's a really simple work-around for it, you simply add a defintion to your CSS that browsers other than IE will ignore and set the height to the same as the min-height, e.g.:
[source:css]
/* for standards-compliant browsers */
.bigbox {
width: 300px;
padding: 2px;
border: 1px solid #000;
min-height: 200px;
height: auto;
}
/* for Internet Explorer */
/*\*/
* .bigbox {
height: 200px;
}
/**/
[/source]
Thanks Stu.

How to reply

Care to add your own 2 cents? Let me know via Twitter or my contact page.