CSS : Overflowing Dynamically Created Content
<p>I'm trying to dynamically update elements initially with a layout like this:</p>

<p><a href="https://i.stack.imgur.com/k5Bt8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k5Bt8.png" alt="enter image description here"></a></p>

<p>Now, the application involves interaction which some button to update the contents of the <strong>Small Content</strong> division :</p>

<p>script upon button click:</p>

<pre><code>$.ajax({    //some ajax request upon button click
      success: function(result){
      $('#small-content').append(result);
      }
});
</code></pre>

<p>What this is doing is upon a button click, a request is made and the results are dynamically added to the <strong>#small-content</strong> div, but it results to this :</p>

<p><a href="https://i.stack.imgur.com/cEWTY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cEWTY.png" alt="enter image description here"></a></p>

<p>How do I fix this in such a way that it pushes the footer down rather than overlapping it? Note that I cannot in anyway modify the footer's css since it was rendered globally.</p>