title: When height of content is more then min-height
body: <p>I've a header and a footer. In the middle a constant left- and right-part, and in the middle my content-part. The height of the content-part is changing.
  I don't succeed in my attempts to place the footer below the content-part when the height of the content-part is more then a min-height.</p>
  
  <p>This is the code of my attempts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
      &lt;style&gt;
      #page{
       width:800px;
       border:1px solid black;
       margin:5px auto;
       background:#e2ebed;
      }
      
      #header{
       height:100px;
       background:yellow;
      }
      
      #center{
       min-height:300px;
       background:lightblue;
      }
      
      #left{
       float:left;
       width:150px;
       background:aquamarine ;
      }
      
      #content{
       float:left;
       width:500px;
      // min-height:300px;
       background:cornflowerblue;
      }
      
      #right{
       float:left;
       width:150px;
       background:aquamarine;
      }
      
      #footer{
       height:50px;
       background:red;
      }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="page"&gt;
       &lt;div id="header"&gt;
        Header
       &lt;/div&gt;
      
       &lt;div id="center"&gt;
        &lt;div id="left"&gt;
         Left
        &lt;/div&gt;
      
        &lt;div id="content"&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
         Content&lt;br&gt;
        &lt;/div&gt;
      
        &lt;div id="right"&gt;
         Right
        &lt;/div&gt;
       &lt;/div&gt;
      
       &lt;div id="footer"&gt;
        Footer
       &lt;/div&gt;
      &lt;div&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>