helloo... i have a form inside the div that can dynamically add data. my problem is that whenever i add data it overlap the div.. what can be the solution for it?

do you have a class or style applied to the div tag or the form? if so, it should probably be reviewed and modified.

<div class="education">

<div class="head"><h3><span class="bld">Education</span></h3></div>

<div class="edit"  ><button id="Add-Educ" style="float:right;" onmouseup="setEdu('');" >Add</button> </div>
		$edu=mysql_query("SELECT * FROM `tbleducation` WHERE `Username`='$user' ");
		if (mysql_num_rows($edu)>0)
			while ($edu_res=mysql_fetch_array($edu))
				<div align="center" style="width:510px;border-top: 0px solid #000;" onmouseover="hide('Edit-Educ<?php echo $i; ?>','visible')" onmouseout="hide('Edit-Educ<?php echo $i; ?>','hidden')" >
				<div class='field'>Degree</div><div class='box'><b><?php echo $edu_res['Degree'];?></b></div>
				<div class="edit"><button id="Edit-Educ<?php echo $i; ?>" onmouseup="setEdu(<?php echo $i ?>);" style="visibility:hidden; float:right;" >Edit</button></div><br/><br/>
				<div class='field'>Field of Study</div><div class='box'><b><?php echo $edu_res['Course'];?></b></div><br/><br/>
            	<div class='field'>School/University</div><div class='box'><b><?php echo $edu_res['School'];?></b></div><br/><br/>
            	<div class='field'>Location</div><div class='box'><b><?php echo $edu_res['Location'];?></b></div><br/><br/>
            	<div class='field'>Inclusive Dates</div><div class='box'><b><?php echo $edu_res['DateFrom'];?></b>&nbsp;&nbsp;&nbsp;to&nbsp;&nbsp;&nbsp;<b><?php echo $edu_res['DateTo'];?></b></div><br/><br/>
				<?php $i++;	

thats the html code

	width: 660px;
	border:solid 1px #cccccc; 
	margin-top: 370px;

and the css code..

My first thought would be. Simply add a float to your education class. E.g.


Oh... and your education tag class doesn't closed.

oh i want to make that div to be middle of the container div