title: How to make a page with header and left-sidebar?
body: <p>I'd like to make a webpage like this:</p>
  
  <pre><code>|----------------------------|
  |            header          |
  |----------------------------|
  |  L  |                      |
  |  e  |                      |
  |  f  |                      |
  |  t  |                      |
  |     |                      |
  |  S  |   Content Area       |
  |  i  |                      |
  |  d  |                      |
  |  e  |                      |
  |  b  |                      |
  |  a  |                      |
  |  r  |                      |
  |----------------------------|
  </code></pre>
  
  <p>The header has a fixed height but it's width should be dynamic. The left-sidebar should have a fixed width but a dynamic height. For the content area, both height and width are dynamic. When user scale their browser, the scrolling bar should not appear(not set overflow:hidden; to hide it.).</p>
  
  <p>I tried to write code like this:</p>
  
  <pre><code>&lt;div class="top"&gt;
      TOP
  &lt;/div&gt;
  &lt;div class="left"&gt;
      LEFT
  &lt;/div&gt;
  &lt;div class="main"&gt;
      MAIN
  &lt;/div&gt;
  </code></pre>
  
  <p>with CSS:</p>
  
  <pre><code>.top {
      width: 100%;
      height: 92px;
  }
  .left {
      width: 178px;
      height: 100%;
      float:left;
  }
  .main {
      float: left;
      height: 100%;
      width: 100%;
   }
  </code></pre>
  
  <p>But it failed.</p>
  
  <p><strong>EDIT: Content Area and Left-SideBar must fill the whole browser window.....
  I don't need</strong></p>
  
  <pre><code>|----------------------------|
  |            header          |
  |----------------------------|
  |  L  |                      |
  |  e  |                      |
  |  f  |                      |
  |  t  |                      |
  |     |                      |
  |  S  |   Content Area       |
  |  i  |                      |
  |  d  |----------------------|
  |  e  |
  |  b  |
  |  a  |
  |  r  |
  |-----|
  </code></pre>