minimum height div

[skiflyer]

I have the a page, in the "middle" of the page i have a container div, where I set a background color and a border and such.

Inside this div there are several other divs which have their visibility turned on and off and whatnot... the size of these internal divs ranges greatly.

I want to set a minimum height to this container div, but also let it grow when the content is larger than that height.

I'm not having much luck, if I set a height, then it works fine on the small divs, but large divs just continue on past the background color/border.

I have a feeling I'm missing something simple... and no, it's not an option to just put the style information in each of the internal divs.

 

[philote]

I believe if you don't set a height then the div will adjust to be big enough for its contents. At least for its contents that are part of the normal flow (not floated or positioned).

Can you post the code or a link to the page?

 

[dkdude]

There is a [tt]min-height[/tt] property in CSS.

However, it doesn't seem to be supported by IE.... Why don't you set a height big enough to fit the largest DIV on your page?

Add [tt]overflow:scroll[/tt] property to be sure the contents will fit on lesser window sixes as well.

Regards


Jakob

 

[Vragabond]

dkdude is right. For standards compliant browsers, use min-height. These would include Geckos (Mozilla, NN, FF), Opera, Safari, Konqueror, etc. For IE, height is understood as min-height, so you can use that. Just make sure all browsers read min-height (IE will ignore) and IE reads height (others will ignore).

/* min-height for standards */
#container {
  min-height: 400px;
}

/* height only for IE */
* html body #container {
  height: 400px;
}

 

[skiflyer]

I don't have a largest div to set the height to, it's a dynamically driven page.

I'll give your solutoin a go Vragabond and see how that turns out.

 

[skiflyer]

Yeah, what I was afraid of... min-height only supports pixel counts, not percentages... but that's not such a big deal... the fact that I need to make this work in IE as well is what's going to kick me.

The overflow idea kinda works... but again, only with a direct pixel count (in IE, it works perfectly in Firefox). And using a direct pixel count in IE given the environments I'm supposed to support just isn't going to work.

I'm thinking perhaps this one isn't possible, maybe I'll just fade the div out to the overall background color at the bottom so it's not drastic... unless anyone else has some ideas.