title: How to keep partial view from overlapping content on main view page
body: <p>I have a button in my view which, when clicked, displays the contents of a partial view.  Each time the user clicks the button, the content of the partial view is added.  This works, however, the main view does not bump down in order to allow room for the fields from the partial view.  So, after the second click, the fields from the partial view overlap  the main view's content.<br>
  I have tried adding an event on the button click which appends line break tags to the div where the partial view will appear, but that isn't moving the page content down.</p>
  
  <p>How do I bump down the content in the main view?</p>
  
  <p><img src="https://i.stack.imgur.com/fSQ5V.png" alt="overlap"></p>
  
  <p>Jquery:</p>
  
  <pre><code>$('#btn-add-employment').click(function () {
              var num = parseInt($('#employer-count').val());
              if ((num+1) &gt; 3) {
                  $('#employer-limit').text("Limit of 3 employers");
              } else {
                  $('#employer-count').val(num + 1);
                  $('#employer-limit').empty();
                  var id = 0;  //set to 0 because for now, appicant record has not been created yet.
                  $.ajax({
                      type: "POST",
                      url: "@Url.Action("AddEmploymentHistory")",
                      data: { ApplicantID: id, RecordNum: (num+1) },
                      success: function(result) {
                          $('#employment-history_' + (num+1)).html(result);
                      }
                  });
              }
          });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button class="btn btn-default" type="button" id="btn-add-employment"&gt;Add Employer&lt;/button&gt;
                  &lt;span id="employer-limit"&gt;&lt;/span&gt;
                  &lt;input type="hidden" id="employer-count" value="0" /&gt;
                  &lt;div id="employment-history_1"&gt;&lt;/div&gt;
                  &lt;div id="employment-history_2"&gt;&lt;/div&gt;
                  &lt;div id="employment-history_3"&gt;&lt;/div&gt;
  </code></pre>