http://desarrolloweb.com/manuales/maquetacion-css.

html Página 1 de 38
 Introducción: Manual de Maquetación CSS

Este es el Manual de Maquetación CSS en el que enseñaremos a maquetar páginas web

utilizando únicamente CSS, la práctica común para este tipo de trabajo.

La maquetación CSS es fundamental y se contrapone a la maquetación antigua que se realizaba

en la web, basada en tablas. Desde hace ya años CSS aporta todas las posibilidades para
realizar una maquetación moderna y versátil de los contenidos.

En este manual encontrarás sobre todo práctica, ya que se supone que para maquetar con CSS
debe de tener un conocimiento al menos básico de las Hojas de Estilo en Cascada. Por tanto,
en lugar de explicaciones teóricas sobre atributos y sus valores, encontrarás ejercicios diversos
de maquetación CSS que podrán venirte bien para practicar.

En el manual encontrarás técnicas de todo tipo, desde las tradicionales en CSS con floats, que
se conocía como tableless y que fue la primera herramienta disponible para posicionar los
contenidos en filas y columnas, hasta la maquetación más moderna basada en estándares CSS
3 como Flexbox y CSS Grid Layout.

Encuentras este manual online en:

http://desarrolloweb.com/manuales/maquetacion-css.html

http://desarrolloweb.com/manuales/maquetacion-css.html Página 2 de 38
 Autores del manual

Las siguientes personas han participado como autores escribiendo artículos de este manual.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online

EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997,
transformando su hobby en su trabajo.

Serviweb

Diseño web Murcia

http://desarrolloweb.com/manuales/maquetacion-css.html Página 3 de 38
 Qué técnicas existen para hacer
maquetación CSS

Comenzamos por poner en contexto la maquetación de páginas web con CSS, explicando
cuáles son las diversas técnicas que existen en la actualidad para hacer la distribución de los
contenidos en filas y columnas en una página web.

Introducción a la maquetación con CSS

Qué es la maquetación CSS, por qué es fundamental para el diseño web actual, cuál ha sido la
evolución de la maquetación web a lo largo de los años y las mejores tecnologías para
maquetar con CSS en la actualidad.

Este artículo se escribió originalmente en 2009. Mucho ha llovido desde entonces! Lo

actualizamos en 2020, mencionando para comenzar que la maquetación CSS sigue siendo
fundamental y que es importante realizarla con las tecnologías más actuales, porque nos
ahorrarán muchos dolores de cabeza, harán nuestro trabajo más sencillo y además,
conseguiremos nuestros objetivos en mucho menos tiempo.

Por eso queremos que cualquier desarrollador interesado en la maquetación CSS conozca las
prácticas más recomendables a día de hoy, de modo que hemos revisado todo el texto y
agregado los puntos importantes que debes de conocer para seleccionar bien tus técnicas CSS a
la hora de maquetar.

Por qué maquetar con CSS

La maquetación con CSS es algo que ya forma parte de nuestro día a día. ¿Es así? Si tu
respuesta es que sí, felicidades!! estás ahorrándote muchos quebraderos de cabeza y enfocando
tus esfuerzos en la vía correcta, que te permitirá crecer y evolucionar como diseñador web y
desarrollador en general. Puedes incluso ahorrarte la lectura de este artículo y pasar
directamente a otros temas más avanzados del manual de Maquetación CSS de

http://desarrolloweb.com/manuales/maquetacion-css.html Página 4 de 38
DesarrolloWeb.com.

Si respondiste que la maquetación CSS no forma parte de tus técnicas habituales, o si piensas
que no la necesitas, estás en el lugar correcto, donde intentaremos hacerte cambiar de idea y
sobre todo, enseñarte a hacer las cosas tal como dicen los estándares, que a la postre
comprobarás que es la manera más sencilla y más potente.

En DesarrolloWeb.com tenemos diversos artículos ya publicados sobre la maquetación web y

según escribimos estas líneas, los estamos agrupando todos en el Manual de Maquetación CSS.
Este manual lo creamos cuando comenzó la corriente del diseño web sin tablas, o "tableless",
como se conoce en inglés. Pero lo estamos actualizando para incorporar las técnicas más
actuales basadas en estándares, con CSS.

Qué había antes de la maquetación CSS

Antes de la llegada de CSS disponíamos únicamente del HTML, que tenía múltiples carencias a
la hora de posicionar elementos en la página, porque cuando fue creado no se esperaba que la
web se convirtiera en un multi-medio, donde los profesionales aportarían caudales de
creatividad y diseños caprichosos. HTML en principio únicamente permitía organizar el texto
en párrafos, acompañado de enlaces, listas, imágenes, tablas y poco más.

Como sólo había HTML, los diseñadores utilizaron el único recurso que tenían a mano para
posicionar elementos en la página: las tablas, que estaban pensadas para presentar
información tabulada (en celdas formadas por filas y columnas), pero no para maquetar una
web entera. Anidando tablas (colocando unas tablas dentro de otras) y con el recurso de
imágenes de un píxel transparente, se podía obtener una estructura de diseño para luego
llenarla con los contenidos que se desease.

Las tablas solucionaron por un buen tiempo las necesidades de los diseñadores de webs, pero
tenían diversos problemas, aparte de no facilitar mucho la estructura de sitios con un diseño
complejo.

El contenido se mezcla con las reglas de presentación o formato. Lo que hace que el
código de tu página web sea innecesariamente grande y ello deriva en páginas más
pesadas. Al final, con tablas tenemos una web más lenta y la transferencia de datos de
nuestro servidor también aumenta, con lo que tu servidor podría atender a menos
usuarios al mismo tiempo y te saldrá más caro de mantener.
El rediseño de una web se hace mucho más complicado, porque para cambiar la forma
con la que se ve tu página tendrás que actualizar todo el código. Si maquetas utilizando
CSS sólo tendrás que cambiar el código CSS para que el aspecto de tu página sea tan
distinto como desees.
Tu página tendrá problemas serios al verse en otros dispositivos, como Palms o
teléfonos móviles, que tienen pantallas menores.
Tendrás que remar contra corriente para intentar que tu página se vea como quieres,
porque estás utilizando unas herramientas, las tablas, que no te ofrecen las
posibilidades necesarias para maquetar a voluntad. Tendrás que aprender mil truqillos
para saltarte las limitaciones de las tablas y a medida que los apliques, tu código se hará
más y más pesado, menos entendible y su mantenimiento será cada día más

http://desarrolloweb.com/manuales/maquetacion-css.html Página 5 de 38
 complicado.

Por qué maquetar con CSS

Cuando apareció CSS tuvimos que aprender un lenguaje nuevo, lo que siempre es, al menos,
un poco pesado. Pero es que los navegadores al principio tampoco lo soportaban
completamente y lo peor de todo, no sabíamos cómo utilizarlo para librarnos de las tablas, o
incluso no sabíamos que CSS nos iba a servir para eso. En definitiva, que durante un buen
tiempo estaba la solución a todos los problemas (las hojas de estilo en cascada: CSS) delante de
nosotros, pero ya sea por pereza, por falta de soporte de los browsers, o porque no sabíamos
cómo valernos de ese nuevo lenguaje, no las explotábamos debidamente.

Afortunadamente, todas las razones por las que podíamos estar dejando de maquetar una web
con CSS han pasado a la historia. Los navegadores las soportan por completo y existe una
extensa documentación sobre la maquetación con hojas de estilo en cascada, que podemos leer
en DesarrolloWeb.com y en otros muchos sitios, aparte de infinidad de libros.

Por otra parte, la profesionalización de los diseñadores de webs y la competencia, hace

necesario que, las personas que nos pretendemos dedicar a trabajar en este mundo del
desarrollo, tengamos que aumentar la calidad de nuestro trabajo, así como mejorar la
productividad y la facilidad de mantenimiento. Incluso si no pretendemos convertirnos en
diseñadores profesionales y tan sólo queremos tener una web bonita y práctica, las CSS serán
nuestro mejor aliado.

Por qué es tan importante separar el contenido de la presentación

Entiendo que muchas personas no encuentren de entrada ventajas en separar el contenido de

la presentación. Yo mismo tardé bastante en entender cómo esta práctica iba a ayudar en mi
trabajo, pero os comentaré un par de casos de mi experiencia:

Hace ya bastantes años, DesarrolloWeb.com estaba alojado en un servicio de hosting donde

me cobraban un extra por la transferencia. Es decir, tenía contratado con el servidor un plan
de alojamiento (que por aquel entonces era el plano mayor que existía en ese alojador), que me
asignaba una tasa de transferencia mensual que siempre acababa superando. Entonces la
empresa de hosting me pasaba una factura mensual por el extra de transferencia que había
consumido el sitio. Ahora ya no recuerdo bien las tasas de transferencia que estaban
contratadas y las que utilizábamos, pero lo que sí recuerdo fue que hicimos un cambio rápido a
CSS (por aquel entonces no utilizaba las hojas de estilo para nada en la página), de manera que
el estilo quedó separado (en buena parte) del contenido de la web y no se repetían infinidad de
veces etiquetas del estilo de FONT, tablas con estilos repetitivos, etc. Todo eso hizo que el peso
de cada página se redujera bastante y también la transferencia del servidor y recuerdo me
ahorré alrededor de 20.000 de las antiguas pesetas (unos 120 euros) al mes en factura por el
extra de transferencia. He de reconocer que en esta actualización ni siquiera nos libramos de
las tablas, pero fue un primer paso en la adecuación del sitio a las CSS, hoy sé que si
hubiéramos suprimido las tablas todavía habría ahorrado más dinero.

Os cuento otro caso representativo, que ocurrió con otro sitio web que realizamos también
nosotros: Guiarte.com, que estaba diseñado con tablas y llevamos unos 4 años en rediseñarlo

http://desarrolloweb.com/manuales/maquetacion-css.html Página 6 de 38
con maquetación CSS, desde que me nos lo propusimos hasta que lo terminamos. Ya sé, es
vergonzoso, pero por falta de tiempo ocurrió así. El rediseño, de tablas a maquetación CSS, se
hizo a la vez que un cambio de tecnología de servidor y había que rehacer el sitio por completo.
Pero sirva de prueba que en el último año se rediseñó otra vez y sólo tuvo que intervenir una
persona de nuestro equipo durante un par de semanas para conseguirlo.

Uno de los sitios web que más me impactaron a la hora de entender cómo CSS podría ayudar
en la maquetación de webs, fue el CSS Zend Garden, en el que podemos ver una web a la que se
le cambia el diseño radicalmente, sólo alterando la hoja de estilo en cascada. Podemos acceder
a ese sitio y ver el diseño principal, pero además, en la barra de la derecha, encontrarás un
listado de alternativas de aspecto creadas por otras personas que resultan sin duda
impactantes, por lo mucho que cambian con respecto a diseño original con sólo alterar el
archivo CSS con los estilos. Sin duda, una demostración como la de CSS Zend Garden es
realmente ilustradora sobre las posibilidades que tendremos a nuestro alcance, si maquetamos
únicamente con hojas de estilos.

Sobre las ventajas de maquetar con CSS frente a la maquetación con tablas ya hemos hablado
en otros artículos en DesarrolloWeb.com, por lo que no voy a repetir de nuevo las mismas
ideas. En este artículo he querido hablar sobre las desventajas de las tablas y compartir con
vosotros algunas de mis experiencias, con intención de motivar a las personas en el
aprendizaje de la maquetación CSS.

Evolución de la maquetación CSS

Hemos hablado mucho sobre las ventajas de usar CSS y evitar el diseño con tablas de los
orígenes de Internet. Pero a decir verdad no creo que haya nadie que aún diseñe con tablas.
Sería preocupante! Pero sin embargo, mucha gente no llega a usar el CSS como debería, con las
técnicas más sencillas y modernas. Es por ello que quiero ahora pararme unos minutos a
explicar cómo la evolución de las técnicas CSS también han facilitado mucho la maquetación
web.

Cuando empezó a usarse CSS para maquetar una web estábamos en el estándar de CSS 2.
Supuso un gran avance para el diseño web, pero han aparecido otras versiones del lenguaje,
como CSS 3 y, incluso bajo la misma versión han surgido especificaciones nuevas como CSS
Grid o Flexbox.

Maquetación por floats

Como hemos dicho, el viejo CSS 2 permitía maquetar de una manera rudimentaria. Se usaba
una propiedad de CSS llamada float que permitía llevar las cosas a la derecha o a la izquerda de
la pantalla. Eso avanzó mucho el mundo de la maquetación, ya que nos permitía crear
columnas.

Sin embargo, el sistema de floats no estaba realmente pensado para crear sitios web con
columnas, sino para hacer que ciertos elementos flotasen hacia un lado y el texto rodease los
elementos flotantes, igual que cuando alineas una imagen a la derecha o la izquierda en un
párrafo. Como consecuencia, existían muchos problemas para conseguir cosas como fondos
continuos en las columnas, obtener diseños de varias columnas, etc.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 7 de 38
Al final, los desarrolladores usábamos "hacks" que nos permitían solventar los problemas del
CSS, pero que requería tener muchos conocimientos (y a menudo bastante retorcidos) y, lo que
es todavía peor, generaba una experiencia de desarrollo muy poco agradable.

CSS3 Flexbox

La primera especificación de CSS que vino al rescate de los diseñadores y maquetadores fue
Flexbox. Básicamente es un nuevo modelo de caja que permite posicionar las cosas en
columnas y filas y permite ser mucho más específico sobre cómo queremos que estas columnas
y filas se distribuyan en posición y tamaño.

Flexbox nos ayudó mucho a maquetar con placer y permitió hacer cosas que antes eran
prácticamente imposibles, como alinear el contenido en la vertical. Si no conoces flexbox te
recomiendo empezar por aquí: Manual de Flexbox.

CSS Grid Layout

La segunda especificación de CSS 3 que ya vino para dar unas herramientas definitivas para la
maquetación web fue CSS Grid Layout. Flexbox facilita enormemente la maquetación, pero los
diseñadores están acostumbrados a disponer de sistemas de rejillas para colocar los elementos
en el diseño. Aunque se podría hacer (y de hecho hay varios) un sistema de rejilla con Flexbox,
tampoco estaba pensado para eso.

CSS Grid es en sí un sistema de rejilla, completamente personalizable por atributos CSS. Es un

nuevo modelo de caja donde los elementos se pueden distribuir en filas y columnas totalmente
adaptables a las necesidades de los diseñadores, parecidos a los que se dispone cuando se
quiere diseñar en papel.

CSS Grid Layout es una maravilla y usarlo es la auténtica delicia! Si no lo conoces te

recomiendo empezar aquí: Manual de CSS Grid Layout

Conclusión

Así pues, espero que os animéis a leer este manual de Maquetación CSS, donde aprenderéis
diversas técnicas con las que empezar a utilizar posicionamiento CSS en lugar de las poco
recomendables tablas.

Una vez adquiridos unos conocimientos básicos, con la lectura de los siguientes artículos, os
sugiero completar las explicaciones y de paso aprender un poco sobre las prácticas habituales
sobre maquetación CSS en los vídeos: Videotutorial de introducción a la maquetación con CSS
y en el Vídeo Práctico de Maquetación CSS.

Os sugiero también de paso otro manual interesante que también trata sobre la maquetación
de webs con CSS, que tiene además una serie de vídeos donde podréis ver las técnicas que
utilizamos de primera mano:Maquetación CSS con 960 Grid System.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 8 de 38
 Este artículo es obra de Miguel Angel Alvarez
Fue publicado / actualizado en 17/07/2009
Disponible online en https://desarrolloweb.com/articulos/intro-maquetacion-css.html

Por qué diseñar con CSS

Mostramos algunas ventajas al maquetar con CSS respecto a otras formas de hacerlo.

Las tablas existen y existieron desde el comienzo en HTML, pero no se crearon para diseñar un
sitio, sino para la presentación de datos tabulares. La utilización del “border=0” y las imágenes
transparentes hicieron posible crear una rejilla que permitió a los diseñadores organizar textos
e imágenes, establecer tamaños y ubicar objetos. Pero ésto es sencillamente incorrecto. Las
tablas no se crearon para maquetar y no deben utilizarse para eso, porque de esta forma se
mezclan presentación y contenido.

La solución es clara: CSS+HTML/XHTML. Afortunadamente, cada vez son más las empresas
que deciden dejar atrás las tediosas tablas y evolucionar desarrollando sus sitios respetando los
estándares establecidos por la W3C (organización internacional que desde hace unos 12 años
se dedica al desarrollo de pautas y estándares web), lo que facilita la accesibilidad y la correcta
visualización de las páginas en los navegadores que respeten dichos estándares.

Algunas de las ventajas de la maquetación con CSS:

Separación de forma y contenido. Generalmente CSS y HTML se encuentran en

archivos separados, lo que facilita el trabajo en equipo porque diseñador y programador
pueden trabajar independientemente. Por otro lado, permite el acceso a distintos
navegadores y dispositivos.
Tráfico en el servidor. Las páginas pueden reducir su tamaño entre un 40% y un 60%, y
los navegadores guardan la hoja de estilos en la caché, ésto reduce los costos de envío de
información.
Tiempos de carga. Por la gran reducción en el peso de las páginas, mejora la experiencia
del usuario, que valora de un sitio el menor tiempo en la descarga.
Precisión. La utilización de CSS permite un control mucho mayor sobre el diseño,
especificando exactamente la ubicación y tamaño de los elementos en la página.
También se pueden emplear medidas relativas o variables para que la pantalla o la caja
contenedora se acomode a su contenido.
Mantenimiento. Reduce notablemente el tiempo de mantenimiento cuando es necesario
introducir un cambio porque se modifica un solo archivo, el de la presentación, sin
tener que tocar las páginas que contienen la estructura con el contenido.
Diseño unificado y flexibilidad. Es posible cambiar completa o parcialmente el aspecto
de un sitio con sólo modificar la hoja de estilos. Por otro lado, el tener el estilo de una
web en un solo archivo permite mantener la misma apariencia en todas las páginas.
Posicionamiento. Las páginas diseñadas con CSS tienen un código más limpio porque
no llevan diseño, sólo contenido. Esto es semánticamente más correcto y la página
aparecerá mejor posicionada en los buscadores. Google navega obviando el diseño.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 9 de 38
Recomiendo un sitio simpático y didáctico sobre el tema:
http://www.hotdesign.com/seybold/spanish/

Este artículo es obra de Serviweb

Fue publicado / actualizado en 18/04/2007
Disponible online en https://desarrolloweb.com/articulos/por-que-diseniar-css.html

http://desarrolloweb.com/manuales/maquetacion-css.html Página 10 de 38
 Maquetación tableless con floats

En estos artículos veremos una práctica de maquetación CSS que surgió con CSS 2, cuando nos
entregaron las herramientas necesarias para poder maquetar sin tablas. En estos artículos
usamos la técnica de los float, que actualmente no es la más sencilla, ya que posteriormente
con CSS 3 aparecieron estándares más potentes para la maquetación.

Maquetar una página con CSS

Tutorial para maquetar una página web utilizando CSS en lugar de tablas.

Vamos a realizar un ejercicio de maquetación de una página web utilizando únicamente hojas
de estilo en cascada (CSS), separando completamente el contenido del archivo HTML de las
definiciones del aspecto, que se guardarán en un archivo .css. El ejercicio lo realizaremos paso
a paso, partiendo de una imagen diseñada previamente con un programa de edición gráfica
como Photoshop.

Nota: Tenemos un manual para aprender CSS en DesarrolloWeb.com, donde además se

explican las primeras nociones y conceptos que hay que conocer sobre la maquetación.

Imágenes de partida

Podemos ver la imagen que hemos creado y que vamos a intentar maquetar lo más parecido
posible. No es el objetivo de este manual ofrecer las técnicas para realizar esta imagen, aunque
en otros manuales de DesarrolloWeb.com podemos ver tutoriales para aprender algunos de los
trucos de diseño utilizados.

Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados con
los que trabajar.

De esta imagen hemos extraído algunos gráficos, que utilizaremos a la hora de maquetar el
diseño. Sería interesante descargarlo para poder realizar el ejercicio por vuestra cuenta.

Para los impacientes, tenemos un enlace a la página resultado que vamos a conseguir realizar
al final del artículo. Puede ser bueno verla para hacerse una idea de donde queremos llegar.

Desarrollo de la página y la hoja de estilos

Vamos a generar los archivos HTML y CSS a la vez, pero paso a paso, de modo que podamos
explicar las etiquetas y estilos que hemos utilizado para cada parte de la página.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 11 de 38
Como primer paso, en la cabecera <head> del documento HTML, enlazaremos con una hoja de
estilos externa.

<head>
<title>La web del invierno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>

El cuerpo de la página

En la declaración de estilos CSS, para el cuerpo de la página, hemos definido una imagen de
fondo "fondo.gif", que se repetirá por toda la página en un mosaico. También se definen unos
márgenes y el alineamiento del texto, en este caso centrado, para que el contenido de la página
aparezca en el centro (esto es necesario para Internet Explorer, el centrado en Mozilla y otros
navegadores se realiza en la capa principal con el atributo "margin" definido como "auto").

Además se definen otros atributos para el cuerpo de la página, que luego heredarán otros
elementos, como el tipo de letra o el color del texto.

BODY {
background : #C0D9D9 url(images/fondo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}

La capa contenedor

Generalmente, se utiliza una capa principal, a la que hemos llamado contenedor. Dentro de
esta capa se colocan todos los elementos que va a tener la página.

<div id="contenedor">

</div>

En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo habíamos
centrado el texto, para que Internet Explorer centre la capa contenedor y deseamos que la
alineación por defecto sea a izquierda). También definimos una anchura de 700px, un color de
fondo blanco y el margen, con el atributo "margin", lo definimos como "auto", para que Mozilla
y otros navegadores centren la capa.

#contenedor{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}

http://desarrolloweb.com/manuales/maquetacion-css.html Página 12 de 38
Por cierto, nos hemos dejado deliberadamente el borde de la capa, que habíamos definido en el
diseño original. Se podría haber definido el atributo "border", pero eso nos repercute
negativamente en la maquetación en Explorer. Veremos más adelante cómo colocarlo para que
se vea correctamente en todos los navegadores.

Este ejercicio lo vamos a ver en varios pasos. En el siguiente bloque mostraremos cómo se
maqueta la cabecera y la barra de navegación.

Este artículo es obra de Miguel Angel Alvarez

Fue publicado / actualizado en 14/02/2005
Disponible online en https://desarrolloweb.com/articulos/1823.php

Maquetar una página con CSS II

Explicamos la creación de la cabecera de la página, que se simplificará al máximo para hacer el
ejercicio más facil.

Continuamos el ejercicio práctico para realizar la maquetación de una página paso a paso con
capas y hojas de estilo en cascada. Se puede ver el artículo anterior de esta serie en Maquetar
una página con CSS.

La cabecera de la página

La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico. Es

lo más cómodo para este diseño, pues la cabecera no tiene otro motivo que decoración.

<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno" border="0"></div>

Vemos que es una simple imagen, pero atención, que tenemos que colocar el </div> a
continuación de <img> sin ningún espacio ni salto de línea, porque si no, Internet Explorer, nos
introducirá un pequeño márgen debajo de la imagen, que queremos evitar.

Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos
que sean las mismas que las de la imagen. Aunque en este caso podríamos habernos ahorrado
definir esos valores porque son los que se tomarían por defecto.

#cabecera{
height : 106px;
width: 700px;
}

La barra de navegación

Vamos con la capa utilizada para definir la barra de navegación horizontal que hay debajo de la
cabecera.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 13 de 38
 <div id="navegador">
<a href="#" class="enlacenav">Portada</a> |
<a href="#" class="enlacenav">Invierno</a> |
<a href="#" class="enlacenav">Diciembre a marzo</a> |
<a href="#" class="enlacenav">La chimenea</a> |
<a href="#" class="enlacenav">Deportes de invierno</a> |
<a href="#" class="enlacenav">Contacto</a>
</div>

Como se puede ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay
que fijarse que además los enlaces tienen una clase, llamada "enlacenav", que utilizaremos
para darle un estilo específico a a estos enlaces, independiente del definido por defecto en la
página.

Por lo que respecta a la capa, se define un color y una imagen de fondo, unos márgenes
internos (atributo padding) y un borde, tanto para la parte de arriba de la capa como para la de
abajo.

#navegador{
background : #F5F4C3 url(images/fondonav.gif);
padding : 3px 10px 5px 10px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
}

Para los estilos de los enlaces utilizamos una clase. Para definir los estilos de cada uno de los
estados de los enlaces (visitados, activos, no visitados, etc), se utilizan las pseudo-clases
VISITED, ACTIVE, FOCUS, LINK Y HOVER. Simplemente definimos el color de los enlaces, el
mismo para todas las pseudo-clases, menos para HOVER, que tiene un color distinto. HOVER
es el estado del enlace cuando el puntero ratón está situado encima. En este caso, cuando el
ratón esté encima, cambiará de color.

A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{

color: #494E6B;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}

Podemos ver cómo queda el ejercicio realizado hasta el momento.

Este artículo es obra de Miguel Angel Alvarez

Fue publicado / actualizado en 14/02/2005
Disponible online en https://desarrolloweb.com/articulos/1824.php

Maquetar una página con CSS III

Realizamos la maquetación del área del cuerpo, donde se mostrará el contenido de la página.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 14 de 38
Este ejercicio trata de maquetar una página utilizando capas y css. La primera parte se puede
ver en: Maquetar una página con CSS. <7p>

El cuerpo de la página

La parte de la página donde colocamos la información principal. Crearemos una capa

independiente para el cuerpo y colocaremos dentro el título, el texto y otros elementos que
queramos situar. Los elementos los introducimos con las etiquetas HTML que deberían tener
en una página básica. Luego, con CSS definiremos el estilo para el cuerpo y cada una de las
etiquetas que colocamos dentro.

<div id="cuerpo">
<h1>Título de la página</h1>
<p>
En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos en cascada (CSS). Veremos cómo realizar este tipo de maquetación, junto con algunas ventajas e
inconvenientes. Para muchos será todavía un campo por explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetación con CSS para que cubrir la
posible laguna por parte del lector. En capítulos sucesivos ampliaremos la información y ofreceremos tutoriales más prácticos.
</p>
<p>
Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la forma, es decir...
</p>
<div id="navabajo">
<a href="#">Volver</a> |
<a href="#">Portada</a> |
<a href="#">Mapa del sitio</a>
</div>
</div>

Vemos que el cuerpo tiene un título, varios párrafos y un div, incluido dentro del propio
cuerpo, con una segunda barra de enlaces que faciliten la navegación para las personas que
lleguen al final del scroll vertical de la página.

Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo.
Además, se define el atributo "float:left" para hacer que el cuerpo "flote" a la izquierda. El
resultado es que la capa del cuerpo se coloque a la izquierda y el contenido escrito a
continuación se sitúe, rodeando a esta capa, a la derecha. (El efecto es el mismo que si
asignamos en HTML el atributo align=left en una imagen)

Para posibilitar la disposición en dos columnas que hemos definido en el diseño original,
vamos a hacer que la capa de la izquerda -el cuerpo- "flote" a la izquierda. Posteriormente, la
capa de la derecha que aun no hemos colocado-el lateral-, haremos que "flote" a la derecha.

#cuerpo{
width:480px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
background-color : #ffffff;
float:left;
}

También se define un estilo para cada algunas de las etiquetas que hemos situado dentro del
cuerpo:

http://desarrolloweb.com/manuales/maquetacion-css.html Página 15 de 38
 H1{
font-size: 12pt;
}

Los encabezados de nivel 1, que tengan tamaño de letra 12pt.

#navabajo{
font-weight : bold;
}

Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para
facilitar la navegación.

Podemos ver el ejercicio tal como queda con los pasos realizados hasta el momento.

Este artículo es obra de Miguel Angel Alvarez

Fue publicado / actualizado en 15/02/2005
Disponible online en https://desarrolloweb.com/articulos/1825.php

Maquetar una página con CSS IV

Creamos el lateral de la página, donde se muestran varios recuadros con un buscador y acceso
a otras informaciones.

En los pasos anteriores de este taller vimos cómo crear la cabecera y cuerpo de la página.
Ahora vamos a ver cómo hacer el lateral derecho de la página.

La capa lateral

En el lateral derecho situamos una nueva capa, que ofrece acceso a servicios y otras
informaciones.

<div id="lateral">
... contenido lateral...
</div>

El contenido que vamos a situar dentro de esta capa lo veremos por partes, pues tiene
bastantes detalles que destacar tranquilamente. Los estilos son los siguientes:

#lateral{
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}

http://desarrolloweb.com/manuales/maquetacion-css.html Página 16 de 38
Se define una anchura, un color de fondo y bordes de color gris claro en la parte lateral
izquierda y abajo, los otros dos lados no tendrán borde por estar en contacto con los bordes de
otros elementos.

Además, con el atributo float:right, indicamos que este lateral debe "flotar" hacia la derecha.
Así, el cuerpo flota a la izquierda y el lateral a la derecha, con lo que conseguimos una
disposición en 2 columnas.

Veremos a continuación los elementos que vamos a colocar dentro de la capa lateral, en una
especie de cajas independientes. Aunque, antes de ver esas cajas una a una, merece la pena
conocer en líneas generales cómo van a crearse. Cada caja tendrá este código HTML,
compuesto por un titulo y un contenido de la caja:

<h2 class="titlat">Titulo de la caja</h2>

<div id="idunico" class="cuerpolateral">
Contenido de la caja
</div>

El título lo incluimos con una etiqueta <h2> y la parte de la caja con el contenido, se define con
un div. Cada uno de estos elementos tiene una clase, que se aplicará a los mismos elementos en
cada una de las cajas, de modo que todos los elementos del lateral compartan un mismo estilo.

.titlat{
background-color:#68729E;
color:#ffffff;
font-size:8pt;
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}

.cuerpolateral{
padding: 5px 4px 13px 10px;
}

El encabezado de nivel 2 utiliza la clase "titlat", que define un color de fondo, un color del
texto, un tamaño de letra, un cambio a mayúsculas de las letras del título, unos márgenes
internos, peso de letra normal (no negrita, como suelen ser los encabezamientos por defecto),
un espaciado de letras de 2 pixel y un margen. Los titulares llevan asociado un salto de línea
doble arriba y abajo, que deseamos evitar y para ello hemos definido un margen de 0 pixels,
menos en la parte de abajo, que tendrá 8 pixel.

Las cajas laterales también tienen un estilo, que se aplica a todos los cuerpos de las cajas que
hay en el lateral. Ese estilo simplemente define unos márgenes internos.

Caja de buscar

Uno de los elementos que vamos a colocar dentro del lateral es una caja de búsqueda, con un
formulario para realizar búsquedas internas, dentro del sitio, y en todo el web.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 17 de 38
Esa caja de búsqueda se coloca en un formulario. Hemos puesto diversos identificadotes a los
elementos que hay dentro del fomulario, para poder aplicar estilos a cada componente por
separado. Aunque algunos de estos selectores ni siquiera los hemos llegado a utilizar, pueden
venir bien si queremos hacer en el futuro modificaciones de la hoja de estilos para actualizar el
diseño del web.

<h2 class="titlat">Buscar</h2>
<div id="fbuscar" class="cuerpolateral">
<form>
<div id="campotexto"><input type="text" name="criterio"></div>
<div id="botonbuscar"><input type=image src="images/go.gif" width="25" height="15"></div>
<div class="radio"><input type="radio" name="op" value="1"> En la Web del invierno</div>
<div class="radio"><input type="radio" name="op" value="2"> En toda la Web</div>
</form>
</div>

Los elementos que hemos definido en la hoja de estilos para este pequeño formulario son los
siguientes:

INPUT {
font-size : 8pt;
}

Con ello definimos que los campos de texto tienen un tamaño de letra de 8 puntos.

#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}

El formulario, que está situado dentro de la capa fbuscar, no debe tener márgenes, ni arriba ni
abajo.

#campotexto{
float: left;
}

La capa "campotexto", donde está el campo de texto, hemos definido que debe "flotar" a la
izquerda.

#campotexto input{
width:100px;
}

El input que hay dentro de la capa campotexto debe tener 100 pixels de ancho.

#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}

http://desarrolloweb.com/manuales/maquetacion-css.html Página 18 de 38
La capa donde está el botón de submit, que en este caso es una imagen de submitir (<input
type="imagen">), tiene un margen interno de 3 pixels por arriba, y de 106 por el lado izquierdo.
Los 106 pixels de ancho salen de los 100 que ocupa el campo de texto que hay a la izquierda,
más 6 pixeles adicionales, que son el verdadero margen que habrá entre el campo de texto y la
imagen de submitir.

#botonbuscar input{
border : 0px none;
}

Con esta última definición estamos indicando que la imagen de submitir (el <input type="image">
que hay dentro de la capa botonbuscar) no tenga borde.

.radio{
clear:both;
}

Esta clase, que afecta a las capas donde están los botones de radio, define que no deben haber
elementos "flotando" ni a la izquierda ni a la derecha, de los botones de radio.

La caja de registro

En la siguiente caja del lateral aparece un pequeño texto invitando a registrarse al visitante.

<div id="registro" class="cuerpolateral">

<a href="#">Registrese con nosotros</a> y obtenga muchas ventajas.
</div>

Esta capa no tiene ningún estilo específico, simplemente se comporta heredando los estilos de
otras capas y con los que se han definido en las clases que se utilizan.

La caja de otras informaciones

Situaremos una última caja dentro del lateral, que contiene enlaces a otras informaciones.
Dentro de la caja colocaremos varios enlaces dentro de una lista.

<h2 class="titlat">Otras informaciones</h2>

<div id="otras" class="cuerpolateral">
<ul>
<li><a href="#">Quienes somos</a>
<li><a href="#">Nuestra misión</a>
<li><a href="#">Agenda de eventos</a>
</ul>
</div>

Para personalizar el estilo de la lista de enlaces se utilizan los siguientes estilos.

#otras ul{
margin : 5px 10px 0px 0px;

http://desarrolloweb.com/manuales/maquetacion-css.html Página 19 de 38
 padding: 0px 0px 0px 4px;
list-style: none;
}

Por un lado tenemos el estilo definido para toda la lista de elementos. En este caso se eliminan
los márgenes que este tipo de listas tienen implícitos. Se coloca también un margen interno 4
pixel a la izquierda y cero en el resto de las posiciones. Con "list-style:none" se indica que no se
desea ninguna bolita a la izquierda de los elementos, puesto que la vamos a colocar a
continuación nosotros manualmente como fondo de los <li>.

#otras li{
padding-left: 14px;
background: transparent url("images/bullet.gif") 0 2px no-repeat;
margin-bottom: 10px;
}

Por otra parte, para cada uno de los elementos de la lista, de define un espacio de 14 pixel a la
izquierda. Esos 14 pixel sirven para hacer espacio, para que quepan unas pequeñas imágenes
que vamos a poner de fondo en las listas, que van a hacer las veces de bolita. También se define
un fondo de los <li> que es la imagen con la bolita personalizada, a juego con nuestro diseño.
También se define un margen en la parte inferior.

Después de integrar todo lo que hemos visto en este ejercicio para crear el lateral de la página,
el diseño queda tal como se puede ver en esta página.

Este artículo es obra de Miguel Angel Alvarez

Fue publicado / actualizado en 23/02/2005
Disponible online en https://desarrolloweb.com/articulos/1842.php

Maquetar una página con CSS V

Para acabar, vamos a crear un pie de página y un borde enmarque la página. Ofreceremos
también unas conclusiones del ejercicio.

Apuntaremos los últimos retoques en el diseño de la página con CSS para finalizar el taller de
maquetación con CSS. Se puede ver la primera parte del artículo.

Pie de la página

Este elemento no lo habíamos previsto en la imagen original, creada previamente, pero lo

hemos decidido colocar porque lo necesitamos, para que en la parte donde está el cuerpo y el
lateral, aparezca el fondo de color blanco. En Explorer aparece el fondo blanco sin ningún
problema, pero en Mozilla y otros navegadores, al estar las dos capas de cuerpo y lateral
"flotando" a izquierda y derecha, no entiende que deba mantener el fondo blanco definido en el
container.

No se si se entiende esto bien, pero lo mejor es hacer una prueba y ver lo que hemos definido

http://desarrolloweb.com/manuales/maquetacion-css.html Página 20 de 38
hasta el momento en la plantilla en Firefox o Mozilla. Veremos que el fondo blanco no está
continuado hacia abajo.

<div id="pie">
Pruebas de maquetación CSS © 2005 DesarrolloWeb.com
</div>

Esta capa tiene el siguiente estilo definido:

#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}

Con "clear:both" indicamos que la capa debe mostrarse sin elementos flotando a izquierda y
derecha, de modo que la posición de la capa será inmediatamente por debajo de la capa cuerpo
y lateral.

Luego se define un color para el texto una alineación de texto, unos márgenes y un margen
interno por la parte de debajo de 10 pixel.

El borde externo

El diseño original incluía un borde de 2 pixel rodeando a toda la capa principal. Podemos hacer
la prueba de incluir un borde en la capa contenedor. Para ello hay que añadir en el estilo para
la capa contenedor el atributo border, de la siguiente manera.

#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}

En Mozilla y navegadores similares, todo es correcto. Pero en Internet Explorer la cosa tiene su
problema. Esto es debido a que el espacio de los bordes, en Explorer, se toma del que se haya
asignado a la propia capa y en Mozilla y otros navegadores, se toma como espacio adicional,
aparte del que se haya asignado a la capa en si.

Lo mejor es probarlo y verlo por uno mismo, o bien encontrarse con el problema y encontrarle
solución sin tener que romperse la cabeza.

Nosotros lo hemos arreglado quitando el borde en la capa contenedor y creando una nueva
capa, en la que situaremos el contenedor. Esa nueva capa la hemos llamado borde y es la que
va a tener el estilo de borde definido.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 21 de 38
 <div id="borde">
<div id="contenedor">
.... contenido de toda la página
</div>
</div>

Para conseguir el borde se han definido el siguiente estilo para la capa borde.

#borde{
border: 2px solid #cccccc;
text-align: left;
width: 700px;
margin: auto;
}

Primero hemos definido un borde de 2 pixel. Luego un centrado a la izquierda (para

contrarrestar el centrado al centro que tiene el body y que habíamos puesto para que Explorer
centrase la capa del contenido. También se incluye una anchura de 700 pixel y un margen
"auto" para que Mozilla y otros navegadores centren la capa.

Por supuesto, conviene ver el resultado final utilizando varios navegadores distintos.

Conclusión

Hemos visto cómo maquetar una página utilizando CSS paso a paso. Esperamos que hayáis
podido seguir el ejercicio y que ninguna dificultad os haya frenado. Realmente el trabajo con
CSS para la maquetación es una tarea fácil, pero también es muy sencillo encontrarnos con
escollos o problemas misteriosos que no parecen tener respuesta.

Sin ser un diseño complicado, realizar esta maquetación nos ha llevado varias horas de trabajo
y algún que otro padecimiento, que por suerte no ha llegado a desesperación. Sobretodo
existen dificultades a la hora de conseguir el diseño que se vea correctamente en todos los
navegadores del mercado. Este diseño lo hemos probado con éxito en Mozilla, Firefox,
Netscape, Opera y Explorer.

Para que la compatibilidad entre navegadores no signifique un problema muy pesado, nuestro
consejo y el de otros desarrolladores, es diseñar con Mozilla o navegadores similares. Luego se
puede ver el resultado en Explorer y adaptar lo que fuera necesario para terminar de cuadrar el
diseño. En este caso habrán pocas cosas que cambiar, mientras que si diseñamos para Explorer
y luego vemos el resultado en otros navegadores, seguramente nos tiremos de los pelos porque
nada esté en su sitio.

La experiencia en el trabajo con CSS, nos dice que a menudo surgen los mismos problemas o
similares. Una vez que ya los hemos resuelto unas pocas veces y nos hemos acostumbrado a
ello, igual que hicimos con los detalles relativos al HTML y la maquetación con tablas, CSS se
torna mucho más sencillo, potente y rápido de desarrollar.

Nota: Si te interesa obtener nuevas explicaciones prácticas sobre maquetación CSS te

http://desarrolloweb.com/manuales/maquetacion-css.html Página 22 de 38
 recomendamos ver los vídeos: Introducción a la maquetación con CSS y la Práctica de
Maquetación CSS. Ambos videotutoriales te seguirán ayudando con nuevos ejemplos útiles
para dominar estas técnicas.

Este artículo es obra de Miguel Angel Alvarez

Fue publicado / actualizado en 23/02/2005
Disponible online en https://desarrolloweb.com/articulos/1843.php

Variar el diseño y maquetación con la hoja de estilos

Continuamos el taller de maquetación con CSS. Creamos un diseño distinto, que aplicamos al
ejemplo realizado anteriormente, cambiando solamente la hoja de estilos.

Hemos visto en una serie de artículos anteriores un ejemplo de cómo maquetar una página
utilizando únicamente CSS para posicionar sus distintos elementos. Una de las principales
ventajas de CSS es que se puede cambiar el aspecto de una página radicalmente, sin necesidad
de cambiar su código HTML. Por ello, nos ha parecido interesante seguir profundizando en la
maquetación de páginas web con CSS, ofreciendo una nueva propuesta de diseño para el
mismo archivo HTML que habíamos utilizado anteriormente.

Para empezar, podemos echar un vistazo al diseño que hemos creado, utilizando un programa
de edición gráfica tipo Photoshop o Fireworks. Vamos a trabajar sobre esta imagen, para que el
diseño resultante sea lo más parecido posible.

También ofrecemos para descarga un archivo comprimido con todas las imágenes que vamos a
utilizar en este diseño. Será interesante tenerlo a mano para tratar de hacer por nosotros
mismos el ejemplo.

El mismo código HTML

Insistimos en la idea de que vamos a utilizar el mismo código HTML que hemos construido al
hacer el ejemplo del artículo de maquetación CSS, dado que las hojas de estilo en cascada nos
proporcionan herramientas para alterar el aspecto de la página sin editar siquiera el archivo
HTML.

La anterior maquetación ya se hizo pensando en que se iba a utilizar para proponer más de un
diseño, por lo que se añadió alguna etiqueta, clase o identificador adicional para facilitar este
paso.

Aunque durante la creación de este segundo ejemplo hemos estado tentados de editar el código
HTML, sólo hemos cambiado un aspecto que vamos a señalar a continuación.

Se trata de la imagen de la cabecera. Si nos fijamos en el archivo HTML anterior,

comprobaremos que la imagen está incluida por medio de una etiqueta <img>. Al definirse la
ruta de la imagen y sus valores de ancho y alto por medio de los atributos de <img>, no podemos

http://desarrolloweb.com/manuales/maquetacion-css.html Página 23 de 38
cambiar esos datos con la hoja de estilos. Como deseamos cambiar la imagen en distintos
diseños, en lugar de colocar la imagen con la etiqueta directamente en el código HTML, vamos
a utilizar un truco que hemos aprendido en CSSZenGarden, que se basa en incluir un titular de
texto, que luego vamos a sustituirlo por la imagen que deseemos. A su vez, hay que decir que
este truco es original de Douglas Bowman http://www.stopdesign.com/articles/css/replace-
text/.

Antes, habíamos definido el siguiente pedazo de código para situar la imagen de cabecera:

<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web del Invierno" border="0"></div>

Ahora, el código de la cabecera será el siguiente:

<div id="cabecera">
<h1><span>La Primavera</span></h1>
</div>

Simplemente hemos definido un titular, que luego no aparecerá en la página, porque lo

ocultaremos por medio de el atributo visibility de CSS. En su lugar, definiremos un fondo para
la capa "cabecera" y asignaremos sus atributos por medio de hojas de estilo.

Así quedarán los estilos para el elemento cabecera y el encabezamiento <h1>:

#cabecera{
background: transparent url(images/cabecera.jpg) no-repeat;
height: 288px;
width: 549px;
}

#cabecera h1 {
margin: 0px 0px 0px 0px;
}
#cabecera h1 span {
display:none;
}

El nuevo código CSS

Aparte de lo comentado para la cabecera, el código CSS creado para aplicar los estilos no
aporta mucha novedad a lo que hemos visto hasta el momento.

Básicamente se ha utilizado nuevas imágenes para los fondos y hemos variado los tamaños y
márgenes de las capas. Aparte, en la parte central o cuerpo de la página, se ha alineado de
manera distinta los elementos, quedando los cuadrados del buscador y enlaces a otras
secciones a la izquierda y el texto de la página a la derecha.

También se puede apreciar como se han utilizado unas imágenes para decorar el fondo de los
titulares de los recuadros de la izquierda. También se ha colocado una imagen en el fondo
donde está el texto de la página. Esta imagen está muy difuminada para permitir leer el texto
con comodidad.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 24 de 38
Vamos a dejar de lado, tal vez para próximos artículos, la explicación detallada de la
declaración de estilos utilizada. En lugar de eso ponemos los enlaces hacia el archivo HTML y
el CSS.

Página con el resultado final del ejercicio.

Declaración de hojas de estilo utilizada.

Este artículo es obra de Miguel Angel Alvarez

Fue publicado / actualizado en 22/03/2005
Disponible online en https://desarrolloweb.com/articulos/1886.php

Maquetación CSS a dos columnas

Mostramos cómo hacer una página web maquetada utilizando únicamente CSS, sin tablas, con
una distribución de 2 columnas, una cabecera y un pie de página. Con diseño de anchura fija o
fluido.

Vamos a ver cómo realizar una maquetación a dos columnas con CSS, sin utilizar tablas.
Además de las dos columnas, para completar la estructura típica de una web, colocaremos una
cabecera y un pie de página.

El ejemplo pretende ser el inicio de una serie de artículos para mostrar cómo realizar distintos
tipos de plantillas, maquetando con CSS en lugar de tablas. Iremos publicando estos artículos
en nuestro Taller de CSS.

Empezamos mostrando los dos ejemplos de maquetación que veremos en este artículo,
siempre con dos columnas, dejando la columna con los enlaces de la barra de navegación a la
izquierda o la derecha.

Maquetación con dos columnas y enlaces a la izquierda

Maquetación con dos columnas y enlaces a la derecha

El código HTML

El código HTML de los dos ejemplos que hemos adelantado es el mismo. Básicamente este:

<div id="contenedor">
<div id="cabecera">
Cabecera 01
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a>
<li><a href="#">Vínculo 2</a>
<li><a href="#">Otro enlace</a>
<li><a href="#">Link chulo</a>
<li><a href="#">Más enlaces</a>
<li><a href="#">Otro último</a>

http://desarrolloweb.com/manuales/maquetacion-css.html Página 25 de 38
 </ul>
</div>
<div id="principal">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
......
</div>
</div>
<div id="pie">
© 2005 DesarrolloWeb.com
</div>
</div>

Se puede ver que tenemos una capa contenedor, que engloba todo el código. Luego, dentro del
contenedor tenemos tres bloques. La cabecera, el cuerpo y el pie de página. La cabecera y el pie
de página son dos capas tal cual, que ocupan todo el espacio del contenedor. El lugar donde
tendremos las dos columnas es el cuerpo.

Dentro del cuerpo tenemos dos partes, para codificar cada una de las dos columnas. Una parte,
que hemos llamado "lateral", con una lista de enlaces (sería la barra de navegación) y otra
parte con el texto de la página, que hemos llamado "principal".

El código CSS

Como habíamos adelantado, veremos dos variantes de codificación a dos columnas, con los
enlaces a la izquierda y a la derecha. No obstante, la mayor parte del código CSS de ambos
ejemplos es la misma, pues sólo varía la declaración de estilos de la capa "lateral" y de la capa
"principal".

Maquetar con los enlaces a la izquierda

Veamos la codificación CSS para la página con los enlaces a la izquierda.

<style type="text/css">
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#contenedor{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #999999;
float:left;
}
#lateral ul{

http://desarrolloweb.com/manuales/maquetacion-css.html Página 26 de 38
 margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffcc;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}
#principal{
margin-left: 170px;
background-color: #ffffff;
padding: 4 4 4 4px;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
}

La parte que vamos a remarcar es donde se define el estilo del lateral y la capa principal. El
lateral hacemos que tenga un tamaño fijo de 160 pixel, pero lo más importante es que hacemos
que "flote" a la izquierda con float:left;. Esto hace que el lateral se quede en la izquierda y
permite que el contenido insertado después del lateral se coloque a la misma altura, pero a la
derecha.

Por su parte, para la capa principal, simplemente se indica que tiene un margen a la izquierda
de 170 píxeles. Esto hace que se coloque al lado de la capa lateral, dejando un espacio en
blanco de 10 píxeles. Tiene un margen de 170, de los que 160 son para el espacio que va a
ocupar la capa de los enlaces y 10 píxeles de espacio entre la capa principal y la lateral.

Como la capa principal no tiene definida su anchura, se hará tan grande como lo permita el
contenedor.

Nota: Estas explicaciones no son completas de todo el ejercicio. Se supone que el lector ya
tiene asimilados algunos conceptos que se han explicado en el Manual de CSS o en el Taller
de CSS.

Podemos ver el ejemplo en marcha en una página aparte. Como es un archivo HTML, podemos
ver el código fuente para ver cómo queda el conjunto de maquetación y declaración de estilos
completo.

Maquetar con los enlaces a la derecha

Continuamos mostrando los cambios que habría que hacer para maquetar la página con la
columna de enlaces a la derecha. Simplemente vamos a cambiar el código CSS de las capas
lateral y principal.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 27 de 38
 #lateral{
width: 160px;
background-color: #999999;
float:right;
}
#principal{
background-color: #ffffff;
padding: 4 4 4 4px;
margin-right: 170px;
}

Ahora la capa lateral estamos indicando que flote a la derecha. Por su parte, en la capa
principal hemos cambiado el margen que había antes hacia la izquierda para ponerlo en la
parte de la derecha.

Podemos ver el ejemplo en una página aparte.

Diseño fluido

Hasta aquí en este artículo hemos visto cómo hacer un diseño con una anchura fija. Si
queremos un diseño fluido (que se ajusta a la anchura de la ventana del navegador), bastaría
con quitarle al contenedor el atributo width: 770px;. Si no tiene definida una anchura, la capa
contenedor se ajustará al tamaño de la ventana del navegador que tenga el visitante.

Además, tendremos que darle un margen al BODY, para que el contenedor no se acople por
completo al borde de la ventana. Por ejemplo, podemos darle un margen de 10 píxeles a cada
lado.

Tendríamos ahora esta declaración de estilos para el BODY y la capa "contenedor":

BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 10 10 10px;
text-align: center;
background-color: #ebebeb;
}
#contenedor{
text-align: left;
margin: auto;
}

Podemos ver el ejemplo en una página aparte.

Este artículo es obra de Miguel Angel Alvarez

Fue publicado / actualizado en 04/08/2005
Disponible online en https://desarrolloweb.com/articulos/2112.php

Maquetación CSS a tres columnas

Veamos cómo hacer una página, maquetada únicamente con Hojas de Estilo en Cascada,

http://desarrolloweb.com/manuales/maquetacion-css.html Página 28 de 38
compuesta por tres columnas. Con diseño de anchura fija y fluido.

Continuando nuestros talleres de CSS, vamos a ver ahora como hacer una estructura de tres
columnas para una página web. Esta es una estructura bastante típica de portal. En una de las
columnas se suele situar la barra de navegación, en otra el contenido y en la última una serie
de banners con promociones.

Sería bueno ver el resultado que buscamos en una página aparte.

Este artículo va a presuponer que el lector comprende ya la maquetación con CSS y que ha
leído el artículo Maquetación CSS a dos columnas. Nos basaremos en ese artículo para
componer la página con CSS a tres columnas.

En líneas generales, la posibilidad que vamos a explorar a continuación para maquetar una
web con tres columnas, consiste en lo siguiente: Pondremos la columna de la izquierda
flotando a la izquierda, la columna de la derecha flotando a la derecha y por último pondremos
la parte principal, que aparecerá en el centro de la página.

El código HTML para hacer este ejemplo será el siguiente:

<div id="contenedor">
<div id="cabecera">
Cabecera 01
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a>
<li><a href="#">Vínculo 2</a>
<li><a href="#">Otro enlace</a>
<li><a href="#">Link chulo</a>
<li><a href="#">Más enlaces</a>
<li><a href="#">Otro último</a>
</ul>
</div>
<div id="otrolado">
<img src="bannerlateral.gif" width="120" height="600" alt="">
</div>
<div id="principal">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa
...
</div>
</div>
<div id="pie">
© 2005 DesarrolloWeb.com
</div>
</div>

Vemos que la página contiene tres partes, la cabecera, el cuerpo y el pie. La cabecera y el pie se
colocarán en el documento ocupando todo el ancho disponible. La parte donde colocaremos las
tres columnas es el cuerpo.

Dentro del cuerpo, como podemos ver, tenemos tres capas. La capa "lateral", que es la que
hemos pensado colocar a la izquierda. Luego está la capa "otrolado", que es la que planeamos
colocar a la derecha. Por último está la capa "principal", que es la parte central. La capa
"principal" aparecerá en el centro, porque a los dos lados estarán ocupados por las capas

http://desarrolloweb.com/manuales/maquetacion-css.html Página 29 de 38
laterales.

El CSS que vamos a utilizar para maquetar esto será el siguiente. Se parece mucho al ejemplo
de maquetación CSS a dos columnas. Luego lo comentaremos.

BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#contenedor{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #999999;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffcc;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}
#otrolado{
width: 120px;
float: right;
}
#principal{
margin-left: 170px;
background-color: #ffffff;
padding: 4 4 4 4px;
width: 460px;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}

Tendremos un contenedor, de 770 píxeles (px) de ancho, que es donde vamos a colocar todas
las capas. Nos centramos en explicar la zona del cuerpo, que es donde aparecerán las tres

http://desarrolloweb.com/manuales/maquetacion-css.html Página 30 de 38
columnas.

Vemos como la capa "lateral" tiene definido un ancho de 160 px, y un float: left; para que flote
a la izquierda. Vemos luego como la capa "otrolado" tiene 120 px de ancho y flota a la derecha.

Luego vemos la capa "principal", que tiene un margen a la izquierda de 170 px, para dejar un
espacio con respecto a la capa "lateral". 170 px porque la capa "lateral" ocupa 160 px de ancho,
más 10 px que es lo que realmente estamos poniendo de margen. En la capa "principal"
también hemos definido un ancho de 460 px, para que ocupe justo el espacio que queda en el
centro.

Se puede ver el ejemplo en marcha en una página aparte.

Diseño fluido

Los diseños fluidos son los que se ajustan a la anchura que tengamos en la ventana del
navegador. En el anterior ejemplo el diseño tenía una anchura fija de 700 píxeles y ahora
vamos a hacer un par de modificaciones para que el diseño se ajuste a la ventana del
navegador.

Simplemente tendremos que quitar la definición de anchura de la capa "contenedor".

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

Luego, también quitaremos la definición de anchura de la capa "principal" y añadiremos el

atributo margin-right: 130px; para que la capa con el contenido central tenga un margen con
respecto a la capa que queda a la derecha. 130 px porque la capa de la derecha ocupaba 120 px,
más 10 px que es realmente el margen que estamos dejando.

#principal{
margin-left: 170px;
background-color: #ffffff;
padding: 4 4 4 4px;
margin-right: 130px;
}

Podemos ver el ejemplo en una página aparte.

Este artículo es obra de Miguel Angel Alvarez

Fue publicado / actualizado en 15/09/2005
Disponible online en https://desarrolloweb.com/articulos/2160.php

Variación de la maquetación con CSS a 3 columnas

http://desarrolloweb.com/manuales/maquetacion-css.html Página 31 de 38
Mostramos una mejora al código mostrado anteriormente para maquetar una página con CSS
a tres columnas.

Ya vimos en un artículo anterior una manera de realizar una maquetación con CSS a tres
columnas. Ahora vamos a realizar unos cambios sencillos para mejorar algo el código del
anterior artículo.

Antes que nada habría que explicar por qué estimamos que puede mejorarse el ejercicio de
maquetación a tres columnas, tal y como fue planteado anteriormente. Se trata simplemente
de mejorar la organización del contenido de la página de una manera más inteligente.

A mi me gusta siempre ver el aspecto que tiene una página web sin la hoja de estilo en cascada,
para ver si la información tiene sentido y orden tal y como se ha colocado en el código HTML.
Es decir, si está presentada de una forma adecuada, aunque no se estén visualizando los estilos
definidos en el CSS.

Cualquier navegador que no tenga soporte a CSS mostrará la página sin ningún estilo y todos
los elementos aparecerán uno detrás de otro según se hayan colocado. No es habitual que nos
visite una persona que tenga un navegador incompatible con hojas de estilo en cascada, pero
para mejorar la accesibilidad de las páginas, también conviene que se lean bien, aunque no se
tenga acceso a CSS.

Así se vería la maquetación CSS a tres columnas sin la declaración de estilos que habíamos
presentado en el anterior ejemplo. Si pulsamos el enlace podremos comprobar que aparece el
banner vertical en la parte superior de la página, cuando lo interesante sería que apareciera
debajo del contenido, por lo menos en mi opinión.

Variación al ejercicio anterior para maquetar a tres columnas

Básicamente vamos a hacer una maquetación a dos columnas, la izquierda, con la barra de
navegación y la de la derecha, con el otro contenido. En la parte de la derecha, a su vez,
haremos dos columnas más, una a la izquierda que tendrá el texto de la página y otra a la
derecha, con la barra lateral derecha.

En realidad, el ejercicio queda muy similar. Veamos el código HTML:

<div id="contenedor">
<div id="cabecera">
Cabecera 01
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a>
<li><a href="#">Vínculo 2</a>
<li><a href="#">Otro enlace</a>
<li><a href="#">Link chulo</a>
<li><a href="#">Más enlaces</a>
<li><a href="#">Otro último</a>
</ul>
</div>
<div id="derecha">
<div id="principal">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 32 de 38
 ……
</div>
<div id="otrolado">
<img src="bannerlateral.gif" width="120" height="600" alt="">
</div>
</div>
</div>
<div id="pie">
© 2005 DesarrolloWeb.com
</div>
</div>

La capa "derecha" es la que hemos creado nueva, donde colocamos tanto el texto principal
como la capa del banner vertical.

El código CSS que hemos variado sólo afecta a la capa "derecha", que no estaba creada
anteriormente y a la capa "principal", que es donde está el texto central.

#derecha{
margin: 0 0 0 170px;
}

#principal{
background-color: #ffffff;
padding: 4 4 4 4px;
width: 460px;
float: left;
}

La capa "derecha" tiene un margen de 170 pixels, para dejar espacio a la barra de enlaces de la
izquierda. La capa "principal", que antes tenía ese margen de 170 píxeles, ya no lo necesita,
pero en cambio sí que hemos puesto el atributo float: left, para que se flote en la parte de la
izquierda.

En definitiva, es una maquetación a dos columnas, en las que una de las columnas tiene a su
vez otra maquetación en dos columnas.

Se puede ver el ejemplo en marcha en una página aparte. El código fuente del ejemplo entero
no lo vamos a escribir. Pero se puede analizar tanto el HTML como el CSS a través de la opción
"ver código fuente" del navegador.

Se puede ver cómo quedaría esta maquetación a tres columnas si nuestro navegador no fuera
compatible con CSS.

Este artículo es obra de Miguel Angel Alvarez

Fue publicado / actualizado en 28/11/2005
Disponible online en https://desarrolloweb.com/articulos/2278.php

http://desarrolloweb.com/manuales/maquetacion-css.html Página 33 de 38
 Maquetación avanzada con Flexbox y CSS
Grid Layout

Ahora vamos a ver prácticas más modernas de maquetación CSS, en las que usamos nuevas
capacidades del estándar para maquetar más fácilmente y de manera más versátil.

Maquetación en filas y 100% height con CSS Grid Layout y Flexbox

Ejemplo de maquetación con la altura completa de la página, height 100% con CSS grid Layout
y Flexbox y además sin desplazamiento o scroll vertical en caso que el contenido sea muy
grande.

Desde que tenemos con nosotros los estándares de Flexbox y CSS Grid Layout es posible hacer
de manera relativamente sencilla maquetación de elementos de la página con formatos
complejos, que antes resultaba bastante complicado.

Sobre todo cuando la maquetación incluye trabajo con las alturas de los elementos la cosa se
complica. Porque con CSS 2 podíamos conseguir maquetación a columnas con los antiguos
floats (mejor si no has tenido que pasar por ahí), pero ¿Qué pasa cuando quieres ajustar los
contenidos en filas usando toda la vertical?

Por ejemplo, imagina que quieres conseguir una maquetación como la que tiene una aplicación
de Whatsapp, con una parte fija arriba y abajo y una central que tiene scroll. Si los elementos
de arriba y abajo son muy rígidos podrías maquetar las partes fijas con un position fixed y la
parte central con un margen, pero esto no siempre es posible, porque igual tenes otros
elementos que tienen que compartir espacio en la vertical y su contenido quizás sea variable,
por lo que no puedes estar seguro de su altura.

Bueno, pues en este artículo vamos a ver cómo maquetar una página usando el 100% con
varias partes de contenido variable arriba y abajo y el espacio sobrante en la altura, con una
sección con contenido también variable y desplazamiento en la vertical.

http://desarrolloweb.com/manuales/maquetacion-css.html Página 34 de 38
Quienes están aprendiendo CSS lo pueden tomar como una práctica para complementar el
Manual de maquetación CSS y quienes llegan aquí con una necesidad de maquetación en la
vertical, en finas, les puede dar la solución a sus problemas, usando las dos posibilidades más
potentes del CSS 3, Flexbox y Grid Layout.

El HTML para nuestro ejercicio

Comenzamos viendo el marcado de este ejercicio, con un código HTML que será exactamente
igual tanto para la solución con Flexbox y CSS Grid Layout.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maquetación vertical por filas</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header>
<h1>Esto es el header</h1>
</header>
<div class="main">
<div class="video">
Este área también es fija, pero podría tener una altura variable en función del contenido, más o menos texto, una imagen, un vídeo, que pueden tener alturas variables, también en función de la
anchura de la ventana del navegador o de la pantalla del móvil.
</div>
<section>
<div class="messages">
<p>Lorem ipsum dolor sit amet… te recomiendo poner aquí un texto largo para que consigas hacer scrol. ¿Sabes generar un "lorem ipsuml"?</p>
<p>Pon más párrafos para que se rellene este espacio.</p>
<p>Y puedas tener una maquetación con desplazamiento.</p>
</div>
<div class="actions">
<input type="text" name="" id="">
</div>
</section>
</div>
</body>
</html>

Este HTML lo puedes malear lo que necesites para que las distintas partes se adapten a lo que
quieras o para demostrar lo flexible que es esta maquetación.

Soluciones de maquetación CSS

Ahora vamos a ver las soluciones de maquetación que podemos hacer para resolver este
problema. Las dos usan técnicas distintas pero también atributos clave comunes de CSS.

Primero quiero asegurarme que conoces estos dos temas:

El atributo Overflow de CSS

Cómo usar el height 100% para ocupar todo el espacio en la altura de la ventana

Maquetar en filas con Flexbox

http://desarrolloweb.com/manuales/maquetacion-css.html Página 35 de 38
Comenzamos con la maquetación usando el estándar CSS Flexbox. Aquí lo que tenemos que
saber es cómo distribuir las filas. Primero necesitamos que la distribución de los items se haga
en columnas, con el flex-direction: column.

Para conseguir que unas ocupen todo el espacio que necesiten y otras que ocupen todo el
disponible restante usamos un atributo de los item con display flex que se llama flex-grow.
Pero también es muy importante que todos los elementos tengan el atributo overflow: auto.

El CSS es el siguiente:

*{
box-sizing: border-box;
}
html {
height: 100%;
max-height: 100%;
line-height: 1.7rem;
}
body {
padding: 0;
margin: 0;
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
justify-content: stretch;
}
header {
background-color: #eee;
padding: 0.8rem;
height: 50px;

}
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
}
h1 {
margin: 0.2rem 0;
}
.video {

}
section {
display: flex;
flex-direction: column;
overflow: auto;
flex-grow: 1;
}
.messages {
flex-grow: 1;
height: 100%;
max-height: 100%;
background-color: #ffc;
overflow: auto;
}
.actions {
height: 50px;
}

http://desarrolloweb.com/manuales/maquetacion-css.html Página 36 de 38
Maquetar en filas con CSS Grid Layout

La maquetación con CSS Grid Layout es muy práctica también, de hecho incluso más adecuada
que con el uso de Flexbox.

Aquí tenemos que conocer bien cómo se distribuye el espacio en las filas, lo que conseguimos
con el atributo grid-template-rows. Puedes entender ese atributo con el artículo Ajustar filas y
columnas de la rejilla.

También es importante saber que podemos conseguir un comportamiento parecido a flex-grow

con las unidades fr de CSS Grid Layout.

El CSS usado en este ejemplo es el siguiente:

*{
box-sizing: border-box;
}
html {
height: 100%;
max-height: 100%;
line-height: 1.7rem;
}
body {
padding: 0;
margin: 0;
height: 100%;
max-height: 100%;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr;
justify-items: stretch;
align-items: stretch;
}
header {
background-color: #eee;
padding: 0.5rem;
}
.main {
padding: 0.3rem;
background-color: #f88;
max-height: 100%;
height: 100%;
border: 1px solid red;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 1fr;
justify-items: stretch;
align-items: stretch;
overflow: auto;
}
h1 {
margin: 0;
}
.video {
background-color: #303030;
color: #fff;
padding: 1rem;
}
section {
border: 3px solid green;
background-color: #9ef;
max-height: 100%;
height: 100%;
padding: 0.5rem 1rem;

http://desarrolloweb.com/manuales/maquetacion-css.html Página 37 de 38
 display: grid;
grid-template-columns: auto;
grid-template-rows: 1fr auto;
justify-items: stretch;
align-items: stretch;
overflow: auto;
}
.messages {
max-height: 100%;
height: 100%;
background-color: #ffc;
overflow: scroll;
}

Para acabar te dejo aquí el código completo de estos ejemplos, para que lo puedas descargar y
ejecutar y comprobar por ti mismo el resultado.

Este artículo es obra de Miguel Angel Alvarez

Fue publicado / actualizado en 16/07/2021
Disponible online en https://desarrolloweb.com/articulos/maquetacion-filas-100-height-
grid-flexbox

http://desarrolloweb.com/manuales/maquetacion-css.html Página 38 de 38