Maquetando con DIVs

La antigua tcnica para maquetar una pgina, se basaba en tablas. Sin duda, en su
momento fu una herramienta til. Sin embargo, a medida que la Web a venido
evolucionando, esta misma tcnica a sido la culpable de muchos problemas para los
webmaster.

El uso de las tablas est condicionado a la mera tabulacin de datos.

Un diseo con tablas no es flexible, es decir, que no podemos cambiar la
distribucin de los elementos en la pgina, a menos que la volvamos a hacer.

Cada Explorador renderiza de manera distinta cada documento HTML y con

estructuras con tablas el cambio es ms notorio

Ocupa ms espacio y ms ancho de banda.

Google no indexa de igual manera las pginas con estructuras basadas en tablas.

Ahora, que ya conocemos todas estan desventajas de usar maquetacin basada en tablas,
podemos darnos cuenta que, comparada con la tcnica de maquetacin con DIVs, las
tablas son mas bien un estorbo en la optimizacin de nuestros sitios. Para maquetar
correctamente con DIVs debemos hacer uso extenso de CSS, algo que tal vez no nos
guste mucho, pero que reducir el tiempo de desarrollo considerablemente. Antes de
comenzar, debemos:

Elegir un buen editor HTML

Tener la gua de XHTML y CSS a mano. Sin nimo de hacer publicidad,
podemos solicitar una copia gratuita a la oficina de la W3C de Espaa

Tener instalado en nuestro sistema como minimo Internet Explorer 6 y 7 (s,

aunque no lo crean, se puede instalar multiples versiones de Internet Explorer en
un computador), Mozilla Firefox y Opera, y si son usuarios de Macintosh;
Safari.

Lapiz y Papel: lo mejor ser que el diseo de la pgina lo hagamos de esta

manera. La razn de esto es que de esta manera, tendremos un plano adecuado
de los elementos y distribucin de los bloques que vamos a trabajar, tratando de
optimizar el nmero de bloques, por que recordemos que entre ms compleja es
nuestra pgina, ms riesgo enfrentamos de que el explorador la renderice
incorrectamente.

Entendiendo la Lgica de la maquetacin con DIVs

Casi todos hemos usado elementos DIV. Sabemos por experiencia que un elemento DIV
nos reserva un bloque y que todo lo que vaya despus; caer a la linea siguiente. Pero, al
igual que las imagenes, los elementos DIV, pueden configurarse para que dejen el texto
y los elementos al lado. Esto lo lograremos con el atributo FLOAT; que usaremos
ampliamente para ir adecuando nuestros elementos en la pgina. Un DIV con FLOAT:
LEFT RIGHT, se alinear dejando el texto al lado. Podemos ir creando DIVs
sucesivos para que se vayan colocando, uno al lado del otro. Pero, maquetando de esta
manera surge un problema y es que el DIV se torna flotante y se sale de su contenedor.

Para solucionar esto, el contenedor deber tener como atributo DISPLAY: TABLE
(generalmente). Esto har que el tamao del contenedor se adapte a sus elementos.
Adems, lo mejor ser que trabajemos con anchos fijos y no en porcentaje (aunque, con
un conocimiento ms amplio, yo lo recomendar), en pixeles, por que los exploradores
trabajan con algunas variaciones en las medidas (en especial Internet Explorer, que
"hasta pierde pixeles") el renderizado ser ms parecido de explorador a explorador.
Una recomendacin adicional, sera usar siempre clases CSS para cada seccin y
bloque, tratando de ir generalizando con los atributos para optimizar la pgina. Pero si
los atributos son pocos solamente en esa pgina se va a trabajar con un elemento con
atributos nicos, podra personalizarse colocando los atributos y valores CSS, dentro de
una parmetro STYLE, no olvidando utilizar estilos por defecto.
Ahora que ya sabemos lo esencial, vamos con el primer ejemplo, resolviendo dudas,
conforme avanzamos.
Actualizacin:
Como les he comentado, todos los ejemplos los he probado en Internet Explorer 6,
Mozilla Firefox 2 y Opera 9 (adicional, comento que ya los he visto en Safari 3 beta
para Windows). Al parecer, podra ocurrir un problema de renderizado con Internet
Explorer 5.5 o anterior. Las soluciones estaran en:

El centrado de DIVs debera hacerse con el atributo text-align: center en el

elemento padre. Lo he probado en Internet Explorer 5.5 y efectivamente, el DiV
padre no se centra. Tambin le he probado con el atributo que comenta mi amigo
y necesita de crear un nuevo contenedor padre y afecta a todos los contenedores
hijos, establecimiento la alineacin al centro. Si desean probar sus diseos en
varias versiones de Internet Explorer, pueden descargar una muy buena utilera
llamada Multiple IE, que les instalar las versiones de Internet Explorer desde la
3.0 a la 6.0.
Solamente, como medida de precaucin, y por recomendacin de un compaero
de trabajo, reeemplace el atributo display: table; por overflow: hidden;. He
probado con ambos y resultan en la misma presentacin.

Maquetando con DIVs (ejemplo I)

En este ejemplo, veremos la forma en que se puede realizar una maquetacin con DIVs
de una estructura de pgina bastante sencilla. El ejemplo consiste en una rea de
encabezando, un panel izquierdo, el rea para contenido y un footer. Los elementos que
describiremos a detalle, en este artculo sern:
Centrado horizontal de un elemento DIV
Estructuras ms dinmicas con DIVs

Cuidando los anchos y altos

Centrado horizontal de un elemento DIV

Aunque parezca algo extrao, los elementos DIV pueden centrarse utilizando los
atributos margin-left: auto; margin-right: auto;. En cierto sentido, es compresible
pensar es esta forma, como una forma lgica de centrar los elementos horizontalmente,
dado que el valor auto para ambos lo empuja hacia el centro.
Estructuras ms dinmicas con DIVs
Nada extraordinario, ocurre cuando dibujamos los elementos en su forma por defecto.
Pero cuando, colocamos al elemento que representa al panel izquierdo y le asignamos
float: left, el siguiente elemento, se corre a su lado. Podemos notar en el cdigo que el
panel tiene el atributo hacia la izquierda y el contenido hacia la derecha. Esto causa que
uno este pegado hacia ese margen para el contenedor, por lo que se restamos el ancho de
cualquiera de los dos, podriamos apreciar que queda un espacio vaci en el centro.
Cuidando los anchos y altos
Ahora, vemos la parte ms delicada de la maquetacin. En las estructuras clsicas con
tablas, podiamos utilizar tamades en porcentaje. Aunque aqui, tambin podemos
utilizar porcentajes, el dibujado de la pgina puede no verse como se esperaba.
Debemos considerar que cuando un elemento sobrepasara el ancho de su contenedor y
es flotante, caer a la linea siguiente. Aunque puede ocurrir que si el elemento tiene una
orientacin hacia la izquierda y el que sobrepasa el tamao la tiene hacia la derecha,

este ltimo dejar una porcin de su contenido por debajo del anterior. Debemos cuidar,
sobre todo los anchos totales de los elementos por linea. Recordemos que cuando
aplicamos valores a los margenes, el explorador suma el ancho fijo ms el margen; igual
que con el padding. Para ello, si deberemos hechar mano de una calcularadora, por que
cualquier valor adicional, sea de margenes, padding, bordes, etc. aumentara el tamao
fijo del objeto.
Hay un ultimo valor CSS que esta en el ltimo elemento DIV. Se trata de CLEAR, que
se encarga de limpiar el comportamiento del DIV anterior para que no afecte a este.
<div

style

<div
<div
<div
<div
</div>

= "display: table; margin-left: auto; margin-right: auto;

width:
500px;">
style
=
"height:
45px;
width:
500px;"></div>
style
=
"float:
left;
height:
75px;
width:
150px;"></div>
style = "float: right; height: 75px; width: 350px;"></div>
style
=
"clear:
both;
height:
35px;
width:
500px;"></div>

Maquetando con DIVs (ejemplo III)

Este es el tercer ejemplo que publico, utilizando maquetacin con DIVs. Al igual que el
artculo anterior, este ejemplo utiliza el mtodo de dibujado del panel derecho, antes que
el izquierdo. An sigo analizando el por que de este comportamiento, pero sin duda, sea
cual sea la respuesta, permite un dibujado ms limpio, optimizado y profesional.

<div
<div
<div
<div
<div
<div
</div>

style
style
style
style
style
style

=
=
=
=
=

=
"display:
table;
"float:
left;
height:
250px;
"float: right; height: 70px;
"float: right; height: 173px;
"float: right; height: 50px;
"float: right; height: 115px;

width:
width:
width:
width:
width:
width:

500px;">
78px;"></div>
413px;"></div>
150px;"></div>
255px;"></div>
255px;"></div>

Maquetando con DIVs (ejemplo IV)

Esta vez, fui vencido por mi propia creatividad, al tratar de realizar esta estructura con
ocho divs. En este caso, me vi obligado a colocar otro DIV ms para los bloques
marcados con un color ms fuerte. De todos modos, estoy contento de que, junto con
ustedes, pude realizar esta estructura, an ms dinmica. Les prometo que para la
siguiente vez, vern un diseo ms dificil de maquetar y con solamente los DIVs
necesarios.

Aqu les dejo el cdigo de este ejemplo para que lo estudien. El punto de esta
maquetacin es saber que los bloques que se colocan en flotante, si no tienen un alto
igual, causaran que los siguientes caigan a la altura del ms alto. Esto puede ser una
ventaja o desventaja.
<div
<div

style
=
"display:
table;
style
=
"float:
left;
<div style = "float: left; height: 100px;
<div style = "float: left; height: 143px;
</div>
<div style = "float: left; height: 250px;
<div style = "float: left; height: 150px;
<div style = "float: right; height: 50px;
<div style = "float: right; height: 194px;
<div style = "float: right; height: 194px;
<div style = "float: right; height: 93px;
</div>

width:
500px;">
width:
104px;">
width: 102px;"></div>
width: 102px;"></div>
width:
width:
width:
width:
width:
width:

100px;"></div>
100px;"></div>
175px;"></div>
80px;"></div>
87px;"></div>
100px;"></div>

Solo como nota adicional, respecto a lo conveniente de maquetar con DIVs, es que
todos los ejemplos que les mostr en este tutorial fueron probados en: Mozilla Firefox
2.0, Opera Browser 9.0 e Internet Explorer 6 y todos resultaron en la misma
estructura.