5.1.1. —perdido, buscando el diseño ideal

Como respuesta a Blogosfera centrada, Lewenhaupt.

Por alergía, los diseños de los blogs parecen estar buscando simplificarse, tratando de alejarse de un CSS Zen Garden hacía un Core Style.

Como un camino fácil de simplificar el diseño (entiendo diseño como organización del contenido) es que se populariza el uso de secciones en el pie de la página reemplazando la clásica barra lateral.

Si la intención es simplificar siguiendo esa línea y además se toman en cuenta las recomendaciones sobre el tamaño horizontal de las líneas de texto, lo más probable es que terminemos con un bloque de texto que diste de ocupar todo el ancho disponible.

Suponiendo que el ancho del bloque de texto está definido (usando hojas de estilo) en una unidad de medida distinta a porcentajes —sí, estoy pensando en px—, es mucho más simple centrarlo usando margin: auto.

¿Por qué margin: auto y no definir una verdadera medida para los márgenes horizontales, especialmente cuando hay gente como uno que no se siente cómoda con el texto ligeramente corrido hacía la izquierda? Simplemente porque un margen diferente a 0 o auto es un espacio siempre desperdiciado.

Cuando definimos los márgenes en auto, no se reserva espacio horizontal (siendo el centrado una forma de excepción). Esto significa que en caso de que el espacio horizontal de la ventana disminuya, las barras de desplazamiento horizontal aparecerían cuando el ancho disponible sea menor al ancho definido para el bloque de texto. Pasándolo a un ejemplo, si el bloque de texto ocupa 800 pixels y el espacio disponible de la ventana es de 1024 pixels, entonces el bloque de texto se mostraría centrado. Si disminuimos el tamaño de la ventana a 799 pixels o menos, recién entonces aparecerían las barras de desplazamiento.

Si definimos un ancho (diferente a 0 o auto) para los márgenes horizontales, el espacio horizontal que se reserva va a ser la suma de la medida definida para el bloque de texto y el espacio que debe haber en los márgenes. Suponiendo que el ancho de la ventana es de 1024 pixels y si definimos un bloque de texto de 600 pixels y un margen izquierdo de 200 pixels todo se vería normalmente. El problema ocurre cuando el ancho de la ventana nuevamente disminuye; si ésta desciende por debajo de los 800 pixels (600 pixels del bloque de texto más 200 pixels reservados para el margen izquierdo) no sólo aparecerá la barra de desplazamiento sino que también estaríamos (continuamente) desperdiciando 200 pixels a la izquierda, además que el bloque de texto iría desapareciendo por el lado derecho de la ventana.