InicioCrear web desde cero › Maquetar la barra lateral con CSS

Maquetar la barra lateral con CSS

Siguiendo con el curso de maquetación, veremos como maquetar la barra lateral con CSS y DIVs

Barra lateral

Llegó la hora de crear la capa de la barra lateral, donde pondremos un menu o lo que necesitemos. 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, vamos vamos vamos... jeje