use overflow and have a default height

[VividDreamer]

I would like to know is it possible to use overflow and have a default height. I want the div to be at least 400px but if the content needs more space then it can just morph without messing up all the other content in the other elements.

[swa66]

Depending on your definition of "morph" that's exactly what overflow is for.

[w3.org...]

Why don't you give it a try in a few small examples ?

[VividDreamer]

---

System: The following message was spliced on to this thread from: http://www.webmasterworld.com/css/3858916.htm [webmasterworld.com] by swa66 - 11:13 am on Feb. 27, 2009 (utc 0)

---

I am using css overflow auto but it keep on scrolling my content and i just want it to expand my element without really messing up the other div elements.

[swa66]

I've merged these two topics as I think it clarifies what you're trying to achieve.

In standards compliant browsers (read: forget about IE6 for now) setting a height means fixing it.
If you then add more than can fit in it overflow will dictate how it all will react to "I've 5 moneys and only room for 3". Either the 2 extra monkey can swap cages with the other 3 as needed (scroll), either we release 2 of them in the wild and they occupy the neighbor's garden (visible), either we hide them out of view (hidden).

If you don't want the box to be fixed in size, well then don't set the height.
If you want the box to have a minimal size, set the min-height (to e.g. show 3 cages even if we currently only have one monkey, so we show 2 empty cages).
Similarly max-height can be use to set a maximum.

So what about IE6: it's broken, nothing new there. IE6 doesn't do min-height nor max-height. Easiest is to use a conditional comment and see how it reacts if you use height to mean min-height, (that how it often reacts as even with a set height it will still expand boxes). If it doesn't do it like that (it sometimes doesn't) you have two options: either use proprietary expression to set the height using them as you need (this is basically something like javascript inside CSS, and rather inefficient), or I usually will send IE6 back to school and apply IE7.js [code.google.com] on it to teach it using javascript the meaning of min-height and max-height