Using height: 100% inside an element with only min-height set

[DJRobThaMan]

Hi,

I have a quick question. Let's say I have something like this


<div class="outer">
<div class="inner"></div>
</div>



.outer
{
min-height: 100px;
}

.inner
{
float: right;
}


How can I make the inner div behave as if I had set its height to 100% and explicitly set the height of the outer (ie. no matter what height the outer div is, have the inner div be that height)

Thanks much,
Douglas

[KDLA]

IE6 disregards min/max height/width settings. (I believe it's true for IE7, too.) Instead, you have to set a height and an overflow property.

I'm curious as to why you're using this method.

[DJRobThaMan]

IE7 does implement min/max height (at least I've used it before and I remember it working). Also, I was going to add a height declaration inside a conditional statement for ie6 and earlier, since in those versions the height declaration is treated the same way the min-height declaration is in other browsers.

Basically, I want a grid layout. And in this specific case I want two boxes beside each other that will always have the same height no matter how the content changes. So if the left box has extra content and goes over 100px, I want the right box to increase in height as well to the same value of the left box (and vice versa).

I hope that explanation makes sense. If you have any other suggestions of how I could implement it, that would be great as well.

Either way, I still am curious as to whether this can be done (100% height inside an element with variable height)

[Centauri]

No - a percentage height needs to reference the height of the parent, and if the parent does not have an explicit height set it defaults to "auto", and a percentage of auto is still "auto". For this scenario, usually some sort of faux column (http://alistapart.com/articles/fauxcolumns) is used on the container background to make it look like both boxes are the same.