Este artículo explica cómo crear un diseño de 3 columnas en CSS. Las instrucciones se aplican a CSS3 y versiones anteriores.

Dibuja tu diseño

Puede dibujar su diseño en papel o en un programa de gráficos. Si ya tiene un marco de alambre o un diseño aún más extenso en mente, simplifíquelo a las cajas básicas que componen el sitio. Este diseño que acompaña a este artículo tiene tres columnas en el área de contenido principal, así como un encabezado y un pie de página. Si observa de cerca, puede ver que las tres columnas no tienen el mismo ancho.

Una vez que haya elaborado su diseño, puede comenzar a pensar en las dimensiones. Este diseño de ejemplo tendrá las siguientes dimensiones básicas:

• No más de 900 píxeles de ancho
instagram viewer
• Canalón de 20 px a la izquierda
• 10 px entre columnas y filas
• Columnas de 250 px, 300 px y 300 px de ancho
• La fila superior mide 150 píxeles de alto.
• La fila inferior tiene 100 píxeles de alto.

Escriba HTML / CSS básico y cree un elemento contenedor

Dado que esta página será válida HTML documento, comience con un contenedor HTML vacío.

Agregue los estilos CSS básicos a Ponga a cero los márgenes, bordes y rellenos de la página.. Si bien hay otros estilos CSS estándar para documentos nuevos, estos estilos son lo mínimo que necesita para obtener un diseño limpio. Agréguelos al encabezado de su documento.

Para comenzar a construir el diseño, coloque un elemento contenedor. A veces sucede que puede deshacerse del contenedor más tarde, pero para la mayoría de los diseños de ancho fijo, tener el elemento contenedor facilita la administración en diferentes sitios web. navegadores.

Estilo del contenedor

El contenedor define qué tan ancho será el contenido de la página web, así como los márgenes en el exterior y el relleno en el interior. Para este documento, el contenedor tiene 870 px de ancho con un canalón de 20 píxeles a la izquierda. La canaleta está configurada con un estilo de margen, pero el relleno del contenedor se pone a cero para evitar que los elementos sean tan anchos como el contenedor.

Si guarda su documento ahora, será difícil ver el contenedor porque no contiene nada. Si agrega texto de marcador de posición, podrá ver el elemento contenedor con mayor claridad.

Utilice una etiqueta de título para el encabezado

El estilo que decida aplicar a la fila del encabezado depende en gran medida de su contenido. Si la fila del encabezado solo tendrá un gráfico de logotipo y un título, entonces use una etiqueta de título (

) tiene más sentido que usar un

. Puede diseñar el título de la misma manera que aplica el estilo a un div y evitar etiquetas superfluas.

El HTML de la fila del encabezado va en la parte superior del contenedor y se ve así:

Luego, para establecer los estilos en él, se agregó un borde rojo en la parte inferior para que pudiera ver dónde termina, los márgenes y el relleno se pusieron a cero, el ancho se estableció en 100% y la altura en 150px.

No olvides hacer flotar este elemento con el flotador: izquierda; propiedad. La clave para escribir diseños CSS es hacer flotar todo, incluso las cosas que tienen el mismo ancho que el contenedor. De esa manera, siempre sabrá dónde estarán los elementos en la página.

A Selector de descendientes CSS aplicaba estilos solo a los elementos H1 que están dentro del elemento #container.

Para obtener tres columnas, comience por construir dos columnas

Cuando crea un diseño de tres columnas con CSS, debe dividir su diseño en grupos de dos. Entonces, para este diseño de tres columnas, las columnas central y derecha se agrupan y colocan junto a la columna de la izquierda en un diseño de dos columnas donde la columna de la izquierda tiene 250 px de ancho y la columna de la derecha 610 px de ancho (300 cada una para las dos columnas, más 10 px para el canalón entre ellos).

La columna de la izquierda flota hacia la izquierda, mientras que la otra flota hacia la derecha. Debido a que el ancho total de ambas columnas es de 860 px, hay un canalón de 10 px entre ellas.

Agregar dos columnas dentro de la segunda columna ancha

Para crear las tres columnas, agregue dos divs dentro de la segunda columna más ancha, al igual que agregó 2 divs dentro de la columna del contenedor en el último paso.

Dado que estos dos cuadros de 300 px de ancho están dentro de un cuadro de 610 px de ancho, nuevamente habrá un canalón de 10 px entre ellos.

Agregar en el pie de página

Ahora que el resto de la página tiene estilo, puede agregar el pie de página. Use un último div con una identificación de "pie de página" y agregue contenido para que pueda verlo. También puede agregar un borde en la parte superior, para que sepa dónde comienza.

Agregue sus estilos y contenido personales

Ahora que ha terminado el diseño, puede comenzar a agregar sus propios estilos y contenido personales. Recuerde que los bordes del encabezado y pie de página se agregaron para mostrar las secciones de diseño, no específicamente para el diseño.