One of the existing CSS properties is: min-height.
The min-height property is quite self-explanatory. It defines the minimum height of an element. If the element’s content exceeds this value, the element resizes to the size needed.
On the other hand, the height property defines a fixed size. If the element’s content exceeds that size, the element doesn’t change it’s size, however it’s content overflows.
Internet Explorer 6 (IE6) doesn’t recognize this property at all, and is a property that many times I find quite handy.
But don’t worry, I have a tip to make it work on IE6
We will see some results on different browsers in order for you to understand the problem and the final solution.
Our HTML code for every div is the following:
<div>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
</p>
</div>
Our CSS code:
* {margin:0; padding:0;}
div {float:left; width:240px;margin:40px 20px; background:#EEE; border:1px solid #CCC;}
p {padding:20px; font:italic 90%/150% Georgia, serif;}
Now let’s compare the height and the min-height properties visually…
div {height:130px;}
div {min-height:250px;}
You see? IE6 does whatever he wants. However, if you pay attention, in the first example (height) IE6 is using the div’s height actually as a min-height. The box is being resized according to it’s content.
By realizing this, we can say that IE6’s height is actually a good browser’s min-height
So when using min height, use a conditional comment for IE6 or a hack and you’ll get the desired result.
The final CSS Code:
* {margin:0; padding:0;}
div {float:left; width:240px; min-height:250px; margin:40px 20px; background:#EEE; border:1px solid #CCC;}
p {padding:20px; font:italic 90%/150% Georgia, serif;}
/* IE6 */
* html div {height:250px;}
The final result:
The box will resize in case it needs to. You can check it by increasing the text size in this HTML versions:
Both example 2 and 3 will look the same in any browsers that are not IE6, so bear that in mind.
So there you go. Enjoy!


