How to make a page with header and left-sidebar?

Question

I'd like to make a webpage like this:

|----------------------------| |            header          | |----------------------------| |  L  |                      | |  e  |                      | |  f  |                      | |  t  |                      | |     |                      | |  S  |   Content Area       | |  i  |                      | |  d  |                      | |  e  |                      | |  b  |                      | |  a  |                      | |  r  |                      | |----------------------------| 

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.).

I tried to write code like this:

<div class="top">     TOP </div> <div class="left">     LEFT </div> <div class="main">     MAIN </div> 

with CSS:

.top {     width: 100%;     height: 92px; } .left {     width: 178px;     height: 100%;     float:left; } .main {     float: left;     height: 100%;     width: 100%;  } 

But it failed.

EDIT: Content Area and Left-SideBar must fill the whole browser window..... I don't need

|----------------------------| |            header          | |----------------------------| |  L  |                      | |  e  |                      | |  f  |                      | |  t  |                      | |     |                      | |  S  |   Content Area       | |  i  |                      | |  d  |----------------------| |  e  | |  b  | |  a  | |  r  | |-----| 

Answer 1

example at jsFiddle

.top {     position:absolute;     left:0; right:0;     height: 92px; } .left {     position:absolute;     left:0; top:92px; bottom: 0;     width: 178px; } .main {     position: absolute;     left:178px; top:92px; right:0; bottom:0; }