title: Full screen css layout
body: <p>I want to create a full screen css layout.  </p>
  
  <pre><code>&lt;div id="divLeft"&gt;LEFT is ok&lt;/div&gt;
  &lt;div id="divRight"&gt;
      &lt;div id="divTop"&gt;TOP is ok&lt;/div&gt;
      &lt;div id="divCenter"&gt;CENTER should have liquid height&lt;/div&gt;
      &lt;div id="divBottom"&gt;BOTTOM should be always bottom&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS  </p>
  
  <pre><code>html{
       height:100%
  }
  body{
      height:100%
  }
  #divLeft{
      float:left;
      width:70px;
      height:100%;
      background:#6c9;
  }
  #divRight{
     margin-left:70px;
      height:100%;
      background:#999;
      color:#fff;
  }
  #divTop{
       background:red;
       text-align:right;
  }
  #divCenter{
        background:blue;
        text-align:center;
  }
  #divBottom{
    background:green;
    text-align:center;
  }  
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Bonaca/gpwD4/4/" rel="nofollow">Here is jsfiddle</a></p>
  
  <p>So, problem is with the <code>#divCenter</code> (should have liquid height) and <code>#divBottom</code> (should be always at the bottom of the screen).</p>