Por fin un ejemplo de Box Model entendible

Hace hace muy poco no había querido trabajar con CSS. Siempre encontraba una rápida respuesta para mejor hacerlo de la manera convencional … es mas rápido, no tengo tantos problemas, no se complica tanto, etc. En el último par de meses en los que he estado de webmaster adaptando la presentación de algunos portales a la provista por el publicista de la Fundación he aprendido algunas cositas y como todo lo que aprendo, me ha terminado gustando mucho.

Una de las cosas de las que en realidad no he logrado entender completamente es el box model (modelo de cajas) de CSS. Yo quiero hacer lo que la teoría sugiere: en el HTML dejar sólo el contenido y en CSS especificar como se va a presentar esa información. Según esto, yo quiero que el layout (distribución) de mi página esté dada por el CSS con DIVs y no en el HTML con TABLE. Pero ah que cosa mas extraña para mi.

Le he sacado tiempo en varias oportunidades pero no lo he logrado. Lo mas cerca que he estado funcionaba perfecto en Firefox pero se corría inexplicablemente en IE … como siempre.

Hoy amanecí con ganas de volver a intentarlo y encontré un par de enlaces muy interesantes. Entre ellos me gustó In Search of the Holy Grail de Matthew Levine quien se toma su tiempo para explicar la implementación de una página con tres columnas, dos de ellas de ancho fijo y el centro líquido (consume el tamaño complementario) y con una estructura de DIVs simple, tal y como yo la quería.

<div id="header">Este es el header</div>
<div id="container">

<div id="center" class="column">Este es el centro</div>
<div id="left" class="column">Esta es la izquierda</div>
<div id="right" class="column">Esta es la derecha</div>
</div>
<div id="footer">Estos son los pies</div>

Este código HTML produce el siguiente resultado después de ser mezclado con el CSS correspondiente.

demo_css_div

Como siempre … en Firefox funciona perfecto, lo acabo de probar en IE7 y se enloquece, a pesar de que el autor menciona que funciona en los principales navegadores.

El archivo de prueba que utilicé se puede descargar del siguiente enlace: test_div.html.

Espero mas adelante tener un poco mas de tiempo y hacerlo funcionar ya que no quiero seguir haciendo páginas basadas en TABLEs.

Otro enlace relacionado con el tema que se ve prometedor es Layout Gala (http://blog.html.it/layoutgala/) en el que se presentan varios diseños basados en columnas.

Leave a Reply

Your email address will not be published. Required fields are marked *