1. Layout de 2 columnas
Primero definiré el código html y luego el código css el cual estará en un archivo externo tal y como se explica en el post anterior.
Código html:
------------------------------------------
<div id="wrap">
<div id="columnleft"></div>
<div id="columnright"> </div>
</div>
------------------------------------------
wrap: es el contenedor de los divs internos, esto es muy recomendable para mantener dentro de ciertos márgenes el contenido, además de poder asiganr márgenes globales a todos los divs.
Columnleft: es la columna derecha
Columnright: es la columna izquierda
id: es el identificador que nos permitirá asignarle el código css en el archivo externo al div
Código Css:
Este lo agregamos a un archivo css externo que puede llamarse style.css:
------------------------------------------
#wrap { width:950px; height:600px; background:#F0F0F0; padding:10px;}
#columnleft { width:240px; height:600px; float:left; background:#666666;}
#columnright { width:700px; height:600px; float:right; background: #54CAD3;}
------------------------------------------
El numeral precede el nombre del id el cual asignamos anteriormente en el código html. En el caso del wrap, le asignamos un padding de 10 px que eslgo así como un margen pero del borde hacia adentro, contrario al margin o margen que es el espacio de adentro hacia afuera.
Al wrap se le asignó u tamaño de 950px muy recomendable para aquellas personas (que son la mayoría en estos momentos) que tengan monitores o resoluciones asignadas de 1024 x 768px.
Las columnas derecha y izquierda se les asignó un ancho el cul como podrán ver, suma el 50pxancho del wrap osea 950px.
Obteniendo algo así:
También usted puede ver el código aplicado a través de este enlace
Con la acotación de que el css lo coloqué embedido dentro del html
