title: Divs Overlapping after changing text inside top div from javascript
body: <p>In my code I have a div that is empty when the user first navigates to the page. If the user clicks on a button, a javascript function is called and the div is filled with the information calculated in javascript. For some reason, the top div overlaps the bottom div when the text gets added to it. The only way I have been able to fix the issue is to add an empty button above the bottom div. </p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div style="text-align:left"&gt;
  
      &lt;/div&gt;
      &lt;div id="myDIV" style="height:400px; display:none"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--&lt;div id="chartdiv" style="position:relative; float:left"&gt;&lt;/div&gt;--&gt;
  
  &lt;div style="display:block"&gt;
      @{Html.RenderPartial("DetailsLoadRecordDummy", Model.LoadRecordDummies);}
  &lt;/div&gt;
  </code></pre>
  
  <p>The above code has overlap, but it does not if I change it to something like this:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div style="text-align:left"&gt;
         &lt;button&gt;&lt;button&gt;
      &lt;/div&gt;
      &lt;div id="myDIV" style="height:400px; display:none"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--&lt;div id="chartdiv" style="position:relative; float:left"&gt;&lt;/div&gt;--&gt;
  
  &lt;div style="display:block"&gt;
      @{Html.RenderPartial("DetailsLoadRecordDummy", Model.LoadRecordDummies);}
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried changing the position of the bottom div to relative but that has not worked. For some reason that makes the button above the divs (I did not include its code) not clickable. </p>
  
  <p>Also, the javascript onclick function that is called changes the div w/ id="myDiv" to display:block, if that is useful information. Right now the function adds a chart into the div.</p>
  
  <p>Screenshot of page before user clicks view file, div above Load Record Information table is empty
  <a href="https://i.stack.imgur.com/RLi39.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RLi39.png" alt="enter image description here"></a></p>
  
  <p>Screenshot of page after user clicks view file, rather than moving the Load Record Information table down, the chart overlaps
  <a href="https://i.stack.imgur.com/NBeI5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NBeI5.png" alt="enter image description here"></a></p>