Maquetando con DIV’s (ejemplo I)

16 04 2007

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

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:


Acciones

Information

10 responses

24 04 2008
GUORDO

EXCELENTE, tu explicacion me fue de gran ayuda.

gracias.

14 06 2008
ElAmigo

oye amigo tengo un problema copio tal cual aparece tu codigo ahi y no queda como en tu ejemplo, el div izq del medio queda a la izq si, pero queda abajo del otro

14 06 2008
ElAmigo

perdon el derecho quize decir

2 07 2008
Múltiples div centrados. « Bitácora de Amarganz

[…] El panel padre contiene en modo tabla a los tres paneles hijos que se encuentran en una misma fila y centrados con respecto a la página. Por cierto, yo encontré ayuda el el blog DotPress. […]

2 11 2008
betoja

hola..amigo..soy un novato en el uso de los DIVs pero me parcen muy interasante tus articulos y provechosos.
Bien, La verdad es que quisiera que me ayudes en un problemilla que tengo, y este es que yo tengo un menu en mi sitio que estoy creando y quisisiera que cada vez que elijo una opcion el contenido de la pagina que estoy llamando se cargue en el DIV del centro que muestras tu articulo(estoy usando tu esquema)..como pordria hacerlo????..gracias

10 03 2009
Frangollo

Gracias, tio, te debo una

26 05 2009
after

tengo una duda que me tre de cabeza. Tengo un div id () y quiero meter dentro de ese div una table de 1 fila de 8 columnas. Debe ser fácil, pero no lo sé. Cómo sería? MUCHAS GRACIAS

22 10 2009
ale

No funciona, las columnas quedan de diferente tamaños, en el caso que se introduce informancion,links o lo que sea.

22 10 2009
Pablo

Parece una tontería pero llevava un rato largo buscando de que forma trabajar con los divs sin tener que estar creando estilos que se van acumulando y acumulando en el fichero css y que bien que por fin encuentro una web que da alternativas…

Muchas gracias por el contenido, de momento te vas a ir a mis favoritos.

5 11 2009
Longebor

Bueno, ante todo, gracias por los tutoriales. Ahora bien, tengo entre mis manos un caso como este solo que en vez de 2 columnas (entre el sandwitch) son 3. quiero que las 2 laterales se ajusten en alto automaticamente a la central, puesto que los 2 divs laterales los uso para cargar img y el central para contenido. ¿como deberia hacerlo?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: