title: Redesign UI using DIV and not tables
body: <p>I'm currently trying to convert the following layout below from table to div. It has the following features:</p>
  
  <ol>
  <li>100% in width and height (in relation to browser window size)</li>
  <li>Top half takes up 80% of 100%, bottom half takes 20%</li>
  <li>Top section scrolls in y direction when text overflows, fixed header does not move with scroll however the text below (lorem ipsum...) will move underneath it</li>
  <li>Bottom section does not scroll at all</li>
  </ol>
  
  <p>How can I accomplish this in DIV and not tables?</p>
  
  <p><img src="https://i.stack.imgur.com/XaUSv.png" alt="enter image description here"></p>
  
  <p>This is my code so far: <a href="http://jsfiddle.net/zhz2m/1/" rel="nofollow noreferrer">http://jsfiddle.net/zhz2m/1/</a></p>
  
  <pre><code>&lt;table width="100%" height="100%" id="container"&gt;
    &lt;tr&gt;
      &lt;td height="85%" id="top"&gt;&lt;div id="chat" style="height: 100%; overflow: scroll-y"&gt;
          &lt;h2&gt;Innovation Week 2013 - Virtual Idea Wall&lt;/h2&gt;
        &lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td height="10%" id="bottom"&gt;&lt;form id="send-message"&gt;
          &lt;p&gt;
            &lt;label for="title"&gt;Please give your idea a title&lt;/label&gt;
            &lt;br /&gt;
            &lt;input type="text" id="title" name="title"/&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;label for="message"&gt;Please provide details of your idea&lt;/label&gt;
            &lt;br&gt;
            &lt;input type="text" id="message" name="message"/&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;input type="submit"&gt;
          &lt;/p&gt;
          &lt;/input&gt;
        &lt;/form&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>