Thread: min-height in ie6

in my layout i need to use min-height and i noticed that ie6 does not support ie6, so for all browsers i have

#contentouter{
float: left;
width: 915px;
min-height: 500px;
height: auto;
}

for ie6

* html #contentouter{
height: 500px;
overflow: visible;
}

by using min-height in all browsers the contentouter div always has a minimum height of 500px and whenever content exceeds 500px the contentouter div grows automatically in all browsers and also in ie6

is this the right way to use min-height in all browsers and in ie6 with the above code i have used

please advice.

thanks

In the past I've pretty much ignored IE6 in this case - if the frame was too short and cut off half of the background picture (or whatever), that's tough basically. Of course it depends on which is more important / more likely for your site: having a frame that's larger than 500px high or one that's shorter. What you've got is fine for the latter, and ignoring IE6 takes care of the former.

Alternatively you can hack it by taking advantage of IE6's expanding box bug.

We introduce an element that takes up 500px vertically, but then move the following element 500px up the screen, effectively hiding it. Modern browsers will render it 0px high, but IE6 expands the surrounding element to enclose it.

HTML Code:

    .outer { background-color: #f00; min-height: 500px; }
    
    .inner { height: 500px; margin-bottom: -500px; }

HTML Code:

<div class="outer">
	<div class="inner"></div>
Put the content you want here.  This can be short (under 500px) or long.
</div>

So we have, with the help of an extra div, proper min-height behaviour from IE6.

Note: I've only tried this in IE8 in IE6 mode as I don't have access to IE6 right now. But it should work.

Having googled this, there are worse, better and just different ways to do this. I'd probably go with Dustin Diaz's or Stu Nicholls' solutions.

thanks for letting me know.