Paso 3: Añadir un envase con la Rúbrica y el contenido
En este recipiente, agregaremos dos divs más; un div de contenido y un div de cabecera.
Nuestro archivo html ahora se verá así:
< html >
< head >
prueba < title > < / title >
< link rel = "stylesheet" href="style.css" >
< /HEAD >
< cuerpo >
< div id = "contenedor" >
< div id = "contenido" class = "clearfix" >
Contenido
< / div >
< div id = "cabecera" >
Cabecera
< / div >
< / div >
< /body >
< / html >
Agregaremos el siguiente código a nuestro archivo css:
{} div #container
width: 800px;
margen: 0px auto;
fondo: #FFFFFF;
padding: 0px;
}
div #content {}
width: 800px;
padding-top: 100px;
fondo: amarillo;
}
div #header {}
width: 800px;
altura: 100px;
fondo: azul;
posición: absoluto;
Top: 0px;
}
.clearfix: después de {contenido: "."; altura: 0, display: block; clear: ambos; visibilidad: hidden;}
.clearfix {display: inline-block;}
/ * Ocultar desde IE Mac \ * /
.clearfix {display: block;}
div #container significa que tenemos una etiqueta div con id "contenedor". Vamos a añadir algunos colores y un "margen: 0px auto;" para asegurarse de que nuestro recipiente está centrado en la página.
Tenemos que dar el contenido de una tapa de relleno y la cabecera de un valor absoluto con un "top: 0px" para asegurarse de que el encabezado se coloca por encima de los otros contenidos.
No importa los colores feos. Es sólo que sea más fácil leer los colores y ver los diferentes divs.
Necesitaremos este código extraño clearfix para asegurarse de que nuestro div de navegación y contenido (agregado en el paso siguiente) no salen de la div circundante.
