min-height current wisdom

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

In article <13u492cs8sk8d81 (AT) corp (DOT) supernews.com>,
Jeff <jeff (AT) spam_me_not (DOT) 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...

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 (AT) corp (DOT) supernews.com>,
Jeff <jeff (AT) spam_me_not (DOT) 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