Como soy diseñador Web de pasillo me encargaron hacer los masters de todas las páginas... voy a compartir con uds el proceso de como hacer un layout en CSS de dos columnas, header, footer y menu.
El diseño va así:
Tenemos que definir los elementos de la página para lo cual me aventé esta hoja de estilo:
html, body
{
}
#layoutroot
{
}
#header
{
}
#top-menu
{
}
#main-content
{
}
#sidebar
{
}
#footer
{
}
El contenido general de la página estará definido por el body y html, para lo cual le ponemos los sig atributos:
margin:0;
padding:0;
background:#a7a09a;
color:#000;
background-image:url('../App_Themes/images/strip-background.gif');
margin-top:0;
font-family:"Trebuchet MS", "Segoe UI", Verdana, Tahoma, Arial, sans-serif;
color:#333333;
font-size:14px;
Básicamente le quitamos márgenes, padding y le asignamos colores y tipos de letra que se usaran en el resto de los estilos.
Ahora todo el contenido deberá ir dentro del #layoutroot que es contenedor de mis elementos para lo cual le asignaremos los siguientes atributos:
border-style: solid;
border-width: 0px 1px 1px 1px;
border-color: gray;
width: 900px;
margin: 0 auto;
background-color: white;
Se le añade un borde, color y tamaño para definir el contenedor. Margin 0 auto nos centra el contenedor dentro de la ventana... como pueden ver es un fixed style layout.
Al #header solo le ponemos su tamaño y alto y queda así:
width: 900px;
height:99px;
Aquí viene la parte tricky... queremos poner dos columnas dentro de la parte del contenido... lo logramos mediante un float, vean lo que hacemos primero con #main-content.
float:left;
width: 700px;;
height:600px;
background-image:url('../App_Themes/images/gradient-content.gif');
padding:8px;
Y para #sidebar hacemos lo mismo, solo que el float será del otro lado. Ojo con los tamaños que por el padding, se nos mueven... aquí lo hice a prueba y error ejeje.
float:right;
width: 168px;
height:600px;
background-image:url('../App_Themes/images/gradient-content.gif');
padding:8px;
Aquí hay un issue con el #footer, ya que se nos sube. Esto se debe a que como encuentra que hay floats dentro del layout, quiere ponerse junto al siguiente que se encuentra... esto es comportamiento esperado ya q todos los divs son inline. Para esto lo arreglamos con un clear.
clear:both;
border-style: solid;
border-color: #CCCCCC;
border-width: 1px 0px 0px 0px;
height: 24px;
background-color: #E6E6E6;
font-size: xx-small;
padding:4px;
Y esto es el resultante, obviamente le puse algunos estilos extra e imágenes pero el layout que hicimos es el mismo, ojalá les sirva:
Cheers! 