Is there any way to set a min height for a div?

I have a div that is populated dynamicly. When there is no data in it it shrinks to 0px. I was wondering if there is a way to set a min height for the div but no max height? Is this possible?

Thanks.

~imozeb

 

here you go.

<style type="text/css">
.box {
height:50px;
width:100px;
background-color: #000000;
}
</style>

<div class="box"></div>

 

I have tried that (height:50px; ) and it sets the height to 50 pixel like it should but when the data is greater than 50px the container won't expand.

 

Haven't tested it myself for the height of an element, but check this: http://www.doxdesk.com/software/js/minmax.html

An alternative would be to check with php or asp if the content is empty and then use inline style="height: 50px;" if it's empty.

 

How about 'min-height:50px'?

 

Place that div inside a table with fixed height like this:
<table height="50">
<tr>
<td>
<div style="height:100%;">div content</div>
</td>
</tr>
</table>

Table will automaticaly expand when needed.

 

What a horrible, horrible idea.

 

Use:

#div {min-height:500px; overflow:hidden}

Code (markup):

Since min-height is buggy in ie6, you have to add overflow:hidden to make it work properly.

+1

 

Uhm, overflow:hidden is NOT the answer to IE6... and can cause more problems than it solves if you are dicking with height.

You CAN make min-height that works in IE6/earlier really easy though...

#div {
  min-height:500px;
}

* html #div {
  height:500px;
}

Code (markup):

See, there's a really big bug in IE6 where it treats height as min-height. STANDARDS compliant browsers you want to use min-height, using * html to target just IE6/earlier with height makes IE6 work without screwing up the other browsers.

... even scarier, it validates now.

Oh, and when someone tells you to wrap content in a table just for min-height, you tell them to shove it up their...

 

Thanks. I didn't know about the * operator.

 

min-height:50px will work in all browsers except internet explorer.To do this in ie you have to use a javascript code in Css.
I couldn't remember the actual code, you can google it.

 

Hah, I love how people respond without reading the thread.... and how people assume you "have to use javascript" for *** you don't need javascript for... or make generalized statements about IE that are only true of IE6/earlier.

/FAIL/

 

I see, thanks!

You have to use "* html" in order for this hack to work.

When you use just "*", the browser targets all the CSS selectors that it has in its database, which is not recommended because it will slow down page loading considerably.