How to set this div with height as auto? - html

Question

I have a div with css as this
#middle2 {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #e5e5e5;
border-radius: 15px;
height: 480px;
margin-left: 230px;
margin-top: 20px;
position: absolute;
width: 500px;
}
The html is this one
<div id="middle2" style="height: auto; overflow: hidden;">
<div id="envelop"></div>
<div id="envelop_title">Create your Account</div>
<div id="e_text">
<p>Creating a account is very easy. Just fill-in the form below, click Submit and then proceed to Login! All done!
</p>
</div>
<div id="c_form">
<div id="form_content" style="height:auto; overflow: hidden;">
<form method="post" action="#" onsubmit="return validation()">
<div class="form_row">
<label class=""><span class="star">*</span> First Name</label>
<div class="inputstyle">
<input class="input_col2" type="text" value="" name="first_name" id="np_first_name"/>
<div id="firstName_msg" class="div_msg"></div>
</div>
</div>
<div class="form_row">
<label class=""><span class="star">*</span> Last Name</label>
<div class="inputstyle">
<input class="input_col2" type="text" value="" name="last_name" id="np_last_name"/>
<div id="lastName_msg" class="div_msg"></div>
</div>
</div>
<div class="form_row">
<label class=""><span class="star">*</span> E-mail</label>
<div class="inputstyle">
<input class="input_col2" type="text" value="" name="email" id="np_email" onkeyup="check_email()" autocomplete="off"/>
<input type="hidden" id="ch_add" name="ch_add" value="">
<div id="email_msg" class="div_msg"></div>
</div>
</div>
<div class="form_row">
<label class=""><span class="star">*</span> Password </label>
<div class="inputstyle">
<input class="input_col2" type="password" value="" name="password" id="np_password"/>
<div id="pwd_msg" class="div_msg"></div>
</div>
</div>
<div class="form_row">
<label class=""><span class="star">*</span> Confirm Password </label>
<div class="inputstyle">
<input class="input_col2" type="password" value="" name="cpassword" id="np_cpassword"/>
<input type="hidden" name="ip" id="np_ip" value="<?php echo $this->input->ip_address();?>">
<div id="cpwd_msg" class="div_msg"></div>
</div>
</div>
<div class="form_row">
<label class=""><span class="star">*</span> Contact </label>
<div class="inputstyle">
<input class="input_col2" type="text" value="" name="contact" id="contact"/>
<div id="cpwd_msg" class="div_msg"></div>
</div>
</div>
<div class="form_row">
<label class=""><span class="star">*</span> Address </label>
<div class="inputstyle">
<textarea class="input_col2" name="address" id="address"></textarea>
<div id="cpwd_msg" class="div_msg"></div>
</div>
</div>
<div class="form_row">
<label class=""><span class="star">*</span> Country </label>
<div class="inputstyle">
<select class="input_col2" id="country" name="country"
onchange="get_state(this.value,'state');">
<option value="0">Select Country</option>
<?php
$country_list = $this->autoload_model->get_data_from_table("td_country","*",
"country_title LIKE '%Canada%'")->result_array();
foreach($country as $bil_cnt)
{?>
<option value="<?php echo $bil_cnt['country_id'];?>">
<?php echo $bil_cnt['country_title'];?>
</option>
<?php
}?>
</select>
<div id="cpwd_msg" class="div_msg"></div>
</div>
</div>
<div class="form_row">
<label class=""><span class="star">*</span> State </label>
<div class="inputstyle">
<img src="<?php echo base_url();?>assets/front_assets/images/ajax-loader-1.gif" style="margin: 0 0 0 20px; display:none" id="state_loader"/>
<select class="input_col2" id="state" name="state"
onchange="get_city(this.value,'city')">
<option value="0">Select State</option>
</select>
<div id="cpwd_msg" class="div_msg"></div>
</div>
</div>
<div class="form_row">
<label class=""><span class="star">*</span> City </label>
<div class="inputstyle">
<img src="<?php echo base_url();?>assets/front_assets/images/ajax-loader-1.gif" style="margin: 0 0 0 20px; display:none" id="city_loader"/>
<select class="input_col2" id="city" name="city">
<option value="0">Select City/Suburb</option>
</select>
<div id="cpwd_msg" class="div_msg"></div>
</div>
</div>
<div class="form_row" id="np_register_message">
</div>
<div id="f_button" style="width:123px; height:34px; margin:0 auto; margin-top:30px;">
<img src="<?php echo base_url();?>assets/front_assets/images/button.jpg" style="width:98px;height:35px;"/>
</div>
<div id="f_bottom"></div>
</form>
</div>
</div>
</div>
But the problem is i am getting the div in this way?
How can i solve this issue. I want the div should have auto height and it will stretch automatically

Answer 1

If I interpret your image correctly, the div is adjusting its height automatically.
But, because you have used:
position: absolute
that div is no longer in the flow of the page. This means that elements below it can move up to overlap.
If that is the problem, there are a variety of ways to fix it depending on what the rest of the page is like.