¿Cómo hacer una página con encabezado y barra lateral izquierda?

Me gustaría hacer una página web como esta:

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

El encabezado tiene una altura fija, pero su ancho debe ser dynamic. La barra lateral izquierda debe tener un ancho fijo pero una altura dinámica. Para el área de contenido, tanto la altura como el ancho son dynamics. Cuando el usuario escala su navegador, la barra de desplazamiento no debería aparecer (no establecer el desbordamiento: oculto, para ocultarlo).

Intenté escribir un código como este:

 
TOP
LEFT
MAIN

con CSS:

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

Pero falló.

EDITAR: Área de contenido y Left-SideBar deben llenar toda la ventana del navegador ….. No necesito

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

ejemplo en 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; } 

Aquí está el código simple para ti. Pruebe esto y conozca la calidad de la encoding CSS .

HTML:

 
TOP
LEFT
MAIN

CSS:

 .clear{ clear:both; } .main{ width:500px; } .top { background: blue; width:500px; height: 92px; } .left { float:left; width: 150px; background: red; } .right{ float:right; width:350px; background: yellow; } 

Demo en vivo

Hola, ahora lo haces tan fácilmente como este

Css

 .top { height: 92px; } .left { width: 178px; float:left; } .main { margin-left:178px; } 

HTML

 
TOP
LEFT
N content here MAIN content here MAIN content here

Demo en vivo

————

Demo actualizada

Solo necesita eliminar "float: left;" de su definición .main .

Además, al depurar el posicionamiento, esto realmente ayuda:

 div { border: 1px solid #000; } 

También podría valer la pena bajar la height: 100% desde .left y .main para evitar la barra de desplazamiento vertical

Demostración: http://jsfiddle.net/nRQeA/

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

También puede usar display: table y display: table-cell para crear una página que contenga un elemento de nivel de tabla con 2 celdas de tabla (barra lateral y área de contenido)

Imagen de muestra

 
#outer-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: 15%; vertical-align: top; } #content { display: table-cell; width: 85%; vertical-align: top; }

Un tutorial con una demostración aquí: http://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css