title: how to specify height for divs?
body: <p>I want to specify fixed height for first two divs and percentage values for next two divs.</p>
  
  <p>The last div should occupy all the space (to the bottom of the browser window) left out by the former divs. how do I achieve this in css..?</p>
  
  <p>Here is my css+html.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" &gt;
  &lt;head&gt;
  &lt;title&gt;One Hundred Percent height divs&lt;/title&gt;
  &lt;style type="text/css" media="screen"&gt;
  html
  {
  height:100%;
  }
  
  body 
  {
  margin:0;
  padding:0;
  height:100%;
  }
  header
  {
  height:20px;
  width:100%;
  background-color:red;
  }
  .container2
  {
  height:40px;
  width:100%;
  background-color:#11ccdd;
  }
  .container3
  {
  height:35%;
  width:100%;
  background-color:#bacdef;
  }
  .subcontainer1
  {
  float:left;
  height:35%;
  width:50%;
  background-color:#569895;
  }
  .subcontainer2
  {
  float:left;
  height:35%;
  width:50%;
  background-color:#dbc462;
  }
  .container4
  {
  width:100%;
  background-color:#aaaadd;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;header&gt;
  header
  &lt;/header&gt;
  
  &lt;div class="ClearAll"&gt;&lt;/div&gt; 
  &lt;div class="container2"&gt;
  container2
  &lt;/div&gt;
  &lt;div class="ClearAll"&gt;&lt;/div&gt;
  
  &lt;div class="container3"&gt;
  &lt;div class="subcontainer1"&gt;
  subcontainer1
  &lt;/div&gt;
   &lt;div class="subcontainer2"&gt;
  subcontainer2
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="ClearAll"&gt;&lt;/div&gt;
  
  
  &lt;div class="container4"&gt;
  container4
  
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I need to mention the pixels values of width for first two divs as I wrote here.
  the third container has percentage value of width. the fourth container should occupy the rest of the space(screen size) left out by other three divs. how can I do that ?</p>