Member Avatar for runjel

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?

  • 3 Contributors
  • 5 Replies
  • 120 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by runjel

Dani AI

Generated

Short checklist and fixes for the overlapping/auto-resize problem (and how to center the block). The usual causes are: children are floated or absolutely positioned so the parent collapses, the layout relies on a large manual offset instead of normal flow, or there are unclosed tags that break rendering. was right to flag tag structure issues, and ’s nudge to review styles is the right first step.

If floated children are the issue, make the parent contain them. Two simple CSS fixes are a clearfix pseudo-element or forcing overflow on the parent:

.education::after {
  content: "";
  display: table;
  clear: both;
}
.education {
  overflow: auto; /* or overflow: hidden; use with care to avoid clipping/scrollbars */
}

For horizontal centering give the block a width (or max-width) and use auto horizontal margins. For centering both horizontally and vertically inside a wrapper, use flexbox on the wrapper:

.wrapper {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  min-height: 200px;       /* ensures space to center into */
}

Troubleshooting tips: open DevTools and inspect computed position/height of the parent before and after adding items; toggle suspected rules (position:absolute, floats, fixed heights, large top margins) to see which one causes overlap; search the HTML for unclosed tags or stray inline styles (buttons floated inline are a common culprit). Prefer CSS solutions over JS height hacks; only use script to adjust layout if dynamic content truly needs it.

Recommended Answers

All 5 Replies

Member Avatar for bhartman21

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

Member Avatar for runjel 
<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>
<br/><br/>
<?php
		$edu=mysql_query("SELECT * FROM `tbleducation` WHERE `Username`='$user' ");
		if (mysql_num_rows($edu)>0)
		{
			$i=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')" >
				<br/>
				<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/>
				<br/>
				<?php $i++;	
			}
		}   
      ?>
      
      
</div>

thats the html code

.education
{
	width: 660px;
	border:solid 1px #cccccc; 
	background-color:#F7F7F7;
	margin-top: 370px;
}

and the css code..

Member Avatar for macneato

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

float:left
Member Avatar for macneato

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

Member Avatar for runjel

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.