Hacer dos columnas con CSS

Código CSS

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 CoreASP. Estos recursos se comparten de buena fe con el único objetivo de servir como base de conocimiento en el desarrollo de aplicaciones en ASP Clásico. CoreASP no garantiza la precisión, vigencia ni funcionamiento de los artículos o fragmentos de código publicados, y no se hace responsable por el uso que se les dé. Se recomienda siempre revisar, adaptar y probar el código antes de implementarlo en entornos de producción.