Maquetando con DIV’s (ejemplo I)

En este ejemplo, veremos la forma en que se puede realizar una maquetación con DIV’s de una estructura de página 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 artículo serán:

• Centrado horizontal de un elemento DIV
• Estructuras más dinámicas con DIV’s
• Cuidando los anchos y altos

 

Centrado horizontal de un elemento DIV

Aunque parezca algo extraño, 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 lógica de centrar los elementos horizontalmente, dado que el valor auto para ambos lo empuja hacia el centro.

Estructuras más dinámicas con DIV’s

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 código 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 más delicada de la maquetación. En las estructuras clásicas con tablas, podiamos utilizar tamañdes en porcentaje. Aunque aqui, también podemos utilizar porcentajes, el dibujado de la página 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 orientación hacia la izquierda y el que sobrepasa el tamaño la tiene hacia la derecha, este último dejará una porción 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 más 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 tamaño 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 = "display: table; margin-left: auto; margin-right: auto;
              width: 500px;">
    <div style = "height: 45px; width: 500px;"></div>
    <div style = "float: left; height: 75px; width: 150px;"></div>
    <div style = "float: right; height: 75px; width: 350px;"></div>
    <div style = "clear: both; height: 35px; width: 500px;"></div>
</div>

Articulos Relacionados:

• Maquetando con DIV’s
• Maquetando con DIV’s (ejemplo II)
• Maquetando con DIV’s (ejemplo III)
• Maquetando con DIV’s (ejemplo IV)