Maquetación con CSS y Divs

La maquetación con CSS y Divs es el tipo de maquetación más utilizado en la actualidad. En su momento se maquetaba con tablas, practica que no recomienda en absoluto. Las tablas son para presentar datos de una manera ordenada, no para máquetar una página web.

Voy a explicar el modelo de columnas con un menú superior. El resultado final sería algo parecido a esto:

Como se puede observar el diseño esta formado por una cabecera, un menú, dos divs flotando uno a la derecha y otro a la izquierda y un pie de página. Nótese que están contenidos en un “contenedor” (de color naranja).

Para realizar este diseño se necesitan dos ficheros, uno HTML y uno CSS.

A continuación les dejo código del fichero HTML. Es realmente sencillo. Hay seis divs de los cuales uno contiene a los otros cinco. y dos de ellos están flotando a la derecha y a la izquierda respectivamente.

El código del fichero HTML sería el siguiente:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maquetacion con CSS y Divs</title>
<link rel="stylesheet" href="maquetacionweb.css" type="text/css"/>
</head>

<body>
<div id="contenedor">
  <div id ="cabecera">Cabecera</div>
  <div id ="menu">Menu</div>
  <div id ="izquierda">Columna Izquierda</div>
  <div id ="derecha">Columna Derecha</div>
  <div id ="pie">Pie de Página</div>
</div>
</body>
</html>

El código del CSS es sería el siguiente.

#contenedor{
        background:#C90;
        border:1px solid  #CCC;
		width:100%;
		font-family:Verdana, Geneva, sans-serif;
		font-size:13px;
		padding:1px;
		text-align:center;
		color:#999999;
}
#cabecera{
        background:#FF9900;
        height:100px;
}
#menu{
        height:30px;
        background:#666;
}
#izquierda{
        height:200px;
        background:#CFFAD1;
        float:left;
        width:50%;
}
#derecha{
        height:200px;
        background:#fafad2;
        float:right;
        width:50%;

}
#pie{
        height:50px;
        background:#D3D1C1;
        clear:both;
}

El clear nos coloca el div pie debajo de los dos que están flotando. Y arrastra al contenedor hasta el final de lo contenido

Nótese que hay medidas, tanto de alto como de ancho para poder probar el código y ver que maqueta correctamente.