Maquetando cabecera
Teniendo el contenedor general y siguiendo el diagrama de maquetación que vimos antes, es hora de crear la cabecera de nuestro sitio, a esta le asignaremos el alto que queremos que tenga, siempre dentro de los limites que definimos en el contenedor general, obviamente usaremos mucho menos, solo 50 pixeles, y también un color de fondo (verde) para ir notando cada capa, quedando así:
#cabecera {
background-color: green;
height:50px;
padding:5px;
}y llamamos a esta capa desde el código HTML, pero ojo, tiene que ir dentro de la capa contenedora, así:
<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="cabecera">Esta es la cabecera</div>
</div>
</body>
</html>
Perfecto, ya hemos maquetado el contenedor general y la cabecera, sigamos con la barra lateral.
Maquetando barra lateral
En esta capa, además de agregar otro color de fondo, comenzaremos a utilizar la propiedad
float para flotar la barra a la izquierda, además de establecer un ancho y alto que utilizará la capa.
#barra-lateral {
background-color: orange;
float: left;
width:140px;
height:100%;
}Si no queremos que ocupe todo el alto de la pagina solo ponemos una cantidad de pixeles determinada, sin porcentajes.
El HTML quedará así:<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="cabecera">Esta es la cabecera</div>
<div id="barra-lateral">Esta es la barra lateral</div>
</div>
</body>
</html>
Ya nos falta muy poco para terminar la estructura.
2010-06-03 
1970 leídas 
