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!