title: How to dynamically increase the height of a <div /> based on the contents?
body: <p>I have a div on a page that I need to put content into. Sometimes the content is a few lines high, and sometimes the content is more than the screen height with varying sizes in between. </p>
  
  <p>There is content below the div so I need that content to be pushed down appropriately, so the content below is always right below the div. </p>
  
  <p>Basically, it looks as follows:</p>
  
  <pre><code>&lt;div id="MainContentArea"&gt;&lt;!-- my content --&gt;&lt;/div&gt;
  
  &lt;div id="BottomContentArea"&gt;&lt;!-- pre-existing content --&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It's easy for me to specify a height for the #MainContentArea but I want the height to be adjusted dynamically. Can somebody please show me how to do this? Thanks.</p>