Mezcla de anchos fijos y fluidos en diseño web adaptativo: Tablas CSS

Hay ocasiones en las que algún componente de nuestra web tiene un ancho fijo (por ejemplo, una barra lateral que incluye un banner de publicidad de 300 píxeles de ancho). ¿Cómo combinar esta barra lateral de ancho fijo con la columna principal fluida en un diseño web adaptativo?

Si lo hacéis usando float veréis que es prácticamente imposible que se mantengan las dos columnas donde deben a medida que el ancho de pantalla varía, tal y como podéis ver aquí: http://codepen.io/JuanDBB/pen/jbmDB. Probad a reducir el tamaño de la pantalla del navegador y veréis que en algún momento la columna fija no tiene espacio suficiente y se baja.

Como veis el código es este:

Y los estilos:

Hay una manera de conseguir que todo funcione correctamente y es gracias al uso de tablas en CSS.

Gracias a CSS y a su propiedad display podemos hacer que los elementos HTML se comporten de manera semejante a como lo haría una tabla tradicional.

display: table-cell

Si aplicamos el valor table-cell a la propiedad display podemos combinar columnas con ancho fijo y fluido, como podemos ver en http://codepen.io/JuanDBB/pen/aypgz

El código CSS es ahora:

Compatibilidad de display:table-cell

display: table-cell es soportado por prácticamente la totalidad de navegadores actuales, con la excepción de Internet Explorer 6 y 7. Para estos navegadores tendrás que cargar un estilo alternativo:

Inconvenientes de display: table-cell

Hay algunos inconvenientes en el uso de display: table-cell que debes tener en cuenta:

  • No podrás posicionar de forma absoluta (position: absolute;) ningún elemento situado dentro del elemento al que has aplicado display: table-cell. Si necesitar posicionar un elemento de forma absoluta tendrás que insertar otro div dentro del table-cell y que contenga el elemento a posicionar.
  • Otros problema importante es que en todos los navegadores menos en Chrome las imágenes situadas dentro de cada celda no se reescalan con max-width: 100%. Para solucionarlo envuelve los dos divs en un div con estos estilos:

CSS Grid Layout y Flexbox

Aún están en sus inicios, pero tanto Flexbox como CSS Grid Layout nos permitirán solucionar estos problemas sin necesidad de acudir a display: table-cell.

Usando calc()

En este interesante artículo nos muestran como alternativa el uso de calc() http://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout

Un comentario en “Mezcla de anchos fijos y fluidos en diseño web adaptativo: Tablas CSS

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.