title: Div is not resizing when text is inserted
body: <p>I have a simple CSS fixed width layout with a container and some backgrounds, and a three column design.</p>
  
  <pre><code>&lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
      &lt;div id="BGContainer"&gt;
        &lt;div id="PageContainer"&gt;
        &lt;/div&gt;
        &lt;div id="Content"&gt;
        &lt;div id="MainContent"&gt;
          &lt;asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server"&gt;
          &lt;/asp:ContentPlaceHolder&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="Bottom"&gt;
        &lt;div id="Copyright"&gt;
          Copyright
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>In a different file, I have the content for the <code>ContentPlaceHolder</code></p>
  
  <pre><code>&lt;asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainAreaContentPlaceholder"&gt;
    &lt;div id="Heading"&gt;
       Overskrift
    &lt;/div&gt;
    &lt;div id="LeftColumn"&gt;
      /*Content Here*/
    &lt;/div&gt;
    &lt;div id="CenterColumn"&gt;
      center
    &lt;/div&gt;
    &lt;div id="RightColumn"&gt;
      right
    &lt;/div&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>The problem is that <code>#MainContent</code> is not resizing in height. It always stays the same height</p>
  
  <p>CSS</p>
  
  <pre><code>html {
    height:100%;
  }
  
  body {
    margin:0;
    width:100%;
    height:100%;
    font-family: Verdana, Sans-Serif;
    background-image:url(../Gfx/Design/bg.png);
    background-repeat:repeat;
  }
  
  #BGContainer {
    margin:0px;
    background-image:url(../Gfx/Design/Background-top-gradient.png);
    background-repeat:repeat-x;
    height:210px;
    width:100%;
  }
  
  #PageContainer {
    background-image:url(../Gfx/Design/top-gradient.png);
    background-repeat:no-repeat;
    height:100%;
    width:1016px;
    margin-left:auto;
    margin-right:auto;
  }
  
  #Bottom {
    background-image:url(../Gfx/Design/Bottom.png);
    background-repeat:no-repeat;
    height:32px;
    width:964px;
    margin-left:auto;
    margin-right:auto;
  }
  
  #Content {
    background-color:#FFFFFF;
    background-image:url(../Gfx/Design/content-background.png);
    background-repeat:no-repeat;
    width:1000px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
  }
  
  #MainContent {
    width:980px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;
  }
  
  #Copyright {
    color:#000000;
    font-size:xx-small;
    text-transform:uppercase;
    margin-left:50px;
    padding-top:5px;
  }
  
  #LeftColumn {
    width:311px;
    margin-left:10px;
    border: 1px solid gray;
    min-height:400px;
    float:left;
  }
  
  #CenterColumn {
    width:311px;
    margin-left:10px;
    border: 1px solid gray;
    min-height:400px;
    float:left;
  }
  
  #RightColumn {
    width:311px;
    margin-left:10px;
    margin-right:10px;
    border: 1px solid gray;
    min-height:400px;
    float:right;
  }
  </code></pre>