Blog and Web

Hacer dos columnas con CSS

No trabajar con tablas en la estructuración de una web es un paso importante cuando se quiere


<div id="contenedor">

<div id="lateral">
<p>Aquí ira el contenido alineado a la izquierda</p>
</div>

<div id="principal">
<p>Aquí ira el contenido principal a lado del contenido o menú lateral</p>
</div>

</div>

Como viste existen 3 etiquetas que serviran para:

La propiedades que debén tener son:


#contenedor{
text-align: left;
width: 750px;
margin: auto;}

#lateral{
width: 180px;  /*Este será el ancho que tendrá tu columna*/
background-color: #CCCCCC;  /*Aquí pon el color del fondo que quieras para este lateral*/
float:left; /*Aqui determinas de lado quieres quede esta "columna" */
}

#principal{
margin-left:190px; /*Este margen hace que no se encime el contenido en tu menúlateral, es     importante que pongas un pocos pixeles más que el ancho  de tu columna lateral*/
background-color: #FFFFFF;
border:#000000 1px solid; /*ponemos un dorde para que se vea bonito*/
}