Truco rápido y sencillo para que el ancho de un elemento en un diseño fijo, se vea completo en la navegador

Una página con un diseño fijo, es aquel que utiliza un ancho comúnmente definido en pixeles (px). En este tipo de diseños, no cambia el ancho de la página si es visto en distintas resoluciones de pantalla, siempre se mantiene igual, por lo que, si el blog o página es visto en una resolución de pantalla "menor" al ancho que se tiene definido en dicha página, se formará una barra de desplazamiento horizontal para permitir desplazar la página horizontalmente y verla completa.



Si en dicho diseño, se tienen ciertas secciones como el header, con un ancho de 100%, para que éste ocupe el 100% de la ventana del navegador, al ser vista la página en resoluciones menores que el ancho definido, el fondo de dicha sección no se verá completa, ya que el navegador la cortará, por decirlo así, pues tomará en cuenta la resolución de pantalla en que sea visto.



Nota: Esto no ocurrirá en elementos que tengan posición "fixed", es decir aquello que flotan y que tengan un 100% de ancho.



Para ilustrar lo que estoy diciendo, en la siguiente imagen se muestra el diseño de una página con diseño fijo, tiene 960px (pixeles) de ancho, y tiene un header con un ancho de 100% lo que hace que éste ocupe el total del ancho de la ventana del navegador.

Abajo, puedes ver una simulación de como se vería el mismo diseño, pero visto en una resolución de pantalla de 800 pixeles.

Como puede apreciarse en la simulación  el fondo de la cabecera no se verá completo a la derecha, puesto que la resolución de pantalla es menor que el ancho de la página. También, la barra de desplazamiento horizontal aparecerá, por la misma causa, aunque esto último sólo se soluciona si todo el blog es fluido (usa porcentajes) o un diseño responsivo (responsive en inglés) que es aquel que cambia según la resolución de pantalla del usuario.



Si el ancho de la página es todavía más grande, por ejemplo de 1200 pixeles,  la barra de desplazamiento horizontal se activará desde una resolución menor a dicha medida.

La solución.

Lograr que el fondo se vea completo en dichos casos, es mas fácil de lo que imaginas, y funcionará incluso en Internet Explorer 7, sólo necesitas definir un ancho mínimo en el body, y lo harías así

body {

min-width: 980px;

}

El valor del ancho mínimo, que en el código anterior se muestra como 980 pixeles, deberá ser igual al ancho del blog o página.



Pero, ¿a quién le interesa si se ve o no completo el fondo de ciertos elementos en una resolución menor de 800 pixeles? suponiendo que la página mide 960 pixeles...



No es para preocuparse tanto, puesto que la mayoría de tabletas o tablets tienen una resoluciones superior de 1024 pixeles de ancho, aunque si las hay de menor resolución, y siendo esta una solución tan simple, creo que vale la pena implementarla :)



Luego veremos cómo crear un diseño que pueda adaptarse a las distintas resoluciones de pantalla de los internautas, así que tienes que estar atento (a) ;)





Referencias:

Ver mas información sobre la propiedad min-width.