title: html css layout with header two columns and footer
body: <p>I am trying to create a head area that is 100px in height and spans 100% in width.
  I need 2 columns with the left one being 250px wide and 100% in height down to the footer. The right column should be 100% of the remaining page width and 100% in height to the footer. The footer should be at the bottom of the page and 100px in height and 100% in width.
  Even if there is no content in the 2 columns, I need them to stretch down to the footer and have the footer visible without scrolling down to it.</p>
  
  <p>Here is what I have so far.</p>
  
  <pre><code>&lt;div id="top"&gt;&lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;&lt;/div&gt;
  &lt;div id="left"&gt;&lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;&lt;/div&gt;
  &lt;div id="right"&gt;&lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;&lt;/div&gt;
  &lt;div id="bot"&gt;&lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;&lt;/div&gt;
  
  body, html {
      height: 100%;
  }
  body {
      margin: 0px;
  }
  p {
      margin: 0px;
  }
  #top {
      height: 100px;
      background-color: #F4F4F4;
  }
  #left {
      width: 250px;
      height: 100%;
      background-color: #878787;
      float: left;
      margin-bottom: -100px;
  }
  #right {
      background-color: #323232;
      height: 100%;
      margin-bottom: -100px;
  }
  #bot {
      clear: right;
      height: 100px;
      background-color: #DCDCDC;
      margin-top: -100px;
      z-index: 100;
      position: relative;
  }
  </code></pre>
  
  <p>Here is another example with a table</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0" class="" id=""&gt;
   &lt;tr&gt;
    &lt;td colspan="2" style="background-color: powderblue; height: 100px;"&gt;Header&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td style="background-color: gray; width: 350px;"&gt;Left Col&lt;/td&gt;
    &lt;td style="background-color: DarkSeaGreen"&gt;Right Col&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td colspan="2"  style="background-color: tomato; height: 100px;"&gt;Footer&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/GIXG2.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/GIXG2.gif" alt="enter image description here"></a></p>