CSS Dynamic(?) Height

So I have a PHP page that displays from 1 to 4 input fields. Depending on the circumstance, I want the height of the content box to only be as large as the number of input fields. This might be slightly beyond CSS-only coding, but I do not know where to start.

The PHP looks something like this:


<div id="content">
<form>
<ul>
//if the name of field is in the array $arr
if(in_array("fname",$arr)){
//display the input field
echo '<li>First Name:<input type="text" class="text" value="" name="First Name" /> </li>';}
if(in_array("lname",$arr)){
echo '<li>Last Name:<input type="text" class="text" value="" name="Last Name"/> </li>';}
if(in_array("address",$arr)){
echo '<li>Address:<input type="text" class="text" value="" name="Address"/> </li>';}
if(in_array("email",$arr)){
echo '<li>Email:<input type="text" class="text" value="" name="Email" /> </li>';}

</ul>
<input id="submit_button" class="button" type="submit" name="subscribe" value="Subscribe" />

</form>
</div>



Basically, if you ignore the PHP, its an ul that depending on the user, will include 1 to 4 text input fields. Is there any way to set the CSS for #content to change depending on that user.

Don't apply a height. The content div will automatically wrap the contained elements.

don't apply height to div... If you have to apply height to a div for specific reason specify height as follows:

min-height:200px; /*this height will be stretched down in all browsers except IE6*/
_height:200px; /*this height will work for IE* and can be stretched down (this is fix for IE6)*/

min-height dont wrk in IE6, so its good to apply 'height' attribute for IE6.