Hacer dos columnas con CSS
Código CSS
- Por Programador ASP clásico /
- 12/09/2014 @ 14:03:30 /
- 1161 visitas
Hacer 2 columnas con las etiquetas <table> de html es muy sencillo, pero cuando se quiere ir un paso adelante en la estructuración de una web, debemos recurrir a los hojas de estilo CSS.
El código html es el siguiente:
<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 puede observarse hay tres secciones que serviran para:
- Contenedor – Determina el espacio de trabajo total.
- Lateral – Ancho del lateral y su ubicación.
- Principal – Ancho del contenido.
El código CSS para hacer la estructuración es el siguiente:
#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*/ }
tags:
En esta sección encontrarás una mezcla de códigos recopilados de fuentes públicas de Internet y otros creados por ASP TEAM. Compartimos recursos útiles de buena fe para formar una base de conocimiento en el desarrollo de aplicaciones en ASP Clásico.