I need to set a minimum height for a div, yet have it expand with the
contents.

I have this from 2005:

<style type="text/css">
div{
height: 12px;
background-color: red;
1px solid black;min-height:12px
}

html>body div{
height: auto; /* for not-IE */
}
</style>

<div>one<br>two</div>
<br>
<div></div>

That works in my Firefox 2.0, Opera 9 and IE6 win XP.

Is that still the current best wisdom on this task? This still works
in IE7?

Jeff

Jeff wrote:
> I need to set a minimum height for a div, yet have it expand with the
> contents.
>
> I have this from 2005:
>
> <style type="text/css">
> div{
> height: 12px;
> background-color: red;
> 1px solid black;min-height:12px

Missing a border: above?

> }
>
> html>body div{
> height: auto; /* for not-IE */

More accurate: /* for IE6 and below */

> }
> </style>
>
> <div>one<br>two</div>
> <br>

ick

> <div></div>
>
> That works in my Firefox 2.0, Opera 9 and IE6 win XP.
>
> Is that still the current best wisdom on this task? This still works
> in IE7?

No. See "html > body" child selector filter (and the rest of the page)
at http://msdn2.microsoft.com/en-us/library/bb250496.aspx


--
John
Read about the UIP: http://improve-usenet.org/

John Hosking wrote:
> Jeff wrote:
>> I need to set a minimum height for a div, yet have it expand with the
>> contents.
>>
>> I have this from 2005:
>>
>> <style type="text/css">
>> div{
>> height: 12px;
>> background-color: red;
>> 1px solid black;min-height:12px
>
> Missing a border: above?
>

Yeah, I meant to chop the entire line.
>> }
>>
>> html>body div{
>> height: auto; /* for not-IE */
>
> More accurate: /* for IE6 and below */
>
>> }
>> </style>
>>
>> <div>one<br>two</div>
>> <br>
>
> ick

Well that's as simple as I could make it.
>
>> <div></div>
>>
>> That works in my Firefox 2.0, Opera 9 and IE6 win XP.
>>
>> Is that still the current best wisdom on this task? This still works
>> in IE7?
>
> No. See "html > body" child selector filter (and the rest of the page)
> at http://msdn2.microsoft.com/en-us/library/bb250496.aspx

Is there a "solution" to the div min height issue? What I actually
have is rows of different colored divs (in a table) with varying number
of lines in them. If I don't set a height I don't have a color sample.
If I set a height then the text might flow below the div. I don't want
to stuff &nbsp;'s in them.

I suppose I could add a rule using javascript, but that's more of a
hack than the above hack. I hate CSS hacks as time always seems to
break them.

Jeff


>
>

Jeff wrote:
>
>>> I need to set a minimum height for a div, yet have it expand with the
>>> contents.
>
> What I actually
> have is rows of different colored divs (in a table) with varying number
> of lines in them.

OK...

> If I don't set a height I don't have a color sample.

Sounds like you decided on a solution (min-height) without fully
describing the problem, hence you may be fixing the wrong thing.

Post a URL, or at least a mockup showing your data in context. Then we
may be able to show you a better way to approach it.

--
Berg

David Stone wrote:
> In article <13u492cs8sk8d81@corp.supernews.com>,
> Jeff <jeff@spam_me_not.com> wrote:
>
>> John Hosking wrote:
> [snip]
>> Is there a "solution" to the div min height issue? What I actually
>> have is rows of different colored divs (in a table) with varying number
>> of lines in them. If I don't set a height I don't have a color sample.
>> If I set a height then the text might flow below the div. I don't want
>> to stuff &nbsp;'s in them.
>
> I had thought that IE7 had implemented min-height? IIRC, it does
> have min-width and max-width implemented, although you have to be
> sure IE7 doesn't stumble into quirks mode...


I found this, circa 2006:

http://www.dustindiaz.com/min-height-fast-hack/

selector {
min-height:500px;
height:auto !important;
height:500px;
}

That supposedly worked in IE7.

Jeff

Bergamot wrote:
> Jeff wrote:
>>>> I need to set a minimum height for a div, yet have it expand with the
>>>> contents.
>> What I actually
>> have is rows of different colored divs (in a table) with varying number
>> of lines in them.
>
> OK...
>
>> If I don't set a height I don't have a color sample.
>
> Sounds like you decided on a solution (min-height) without fully
> describing the problem, hence you may be fixing the wrong thing.
>
> Post a URL, or at least a mockup showing your data in context. Then we
> may be able to show you a better way to approach it.
>

It's my old color styler that I posted a month ago. If you don't
remember it, I'll post it without live data in it.

Jeff