Por una web más fluida: Menos "float" y más "inline-block"

Un tip importante que he aprendido sobre CSS para armar sitios web responsive, es dejar de usar el atributo “float” para alinear columnas y elementos, y en vez de eso, aprovechar el amigable “inline-block”. ¡La cantidad de trabajo que puede ahorrar en cuestión de líneas de CSS es genial!

Si en algún momento deciden aprender CSS o si ya lo están dominando, seguramente tendrán como reto armar sitios web responsive (es decir, que fluyan y se adapten a las diversas dimensiones de computadoras y dispositivos móviles).

Como he escrito en un post anterior, un sitio necesita fluir y adaptarse a cualquier pantalla, así que como diseñadores de interfaz de usuario necesitamos tener clara esta meta.

Cuando descubrí el poder del atributo de CSS “float:left” hace varios años, en verdad que no lo dejaba de usar, me parecía la forma más fácil de controlar el alineado de columnas y elementos en mi layout. Realmente el atributo “display:inline-block” era algo que pasaba completamente desapercibido.

Antes de pasar al ejemplo, otro punto importante para diseñar/maquetar sitios web realmente responsive, es en usar cada vez más medidas proporcionales, como porcentajes o em’s (seguro que esto lo explicaré en algún artículo).

Nota: Es bien conocido que al aplicar “display:inline-block” entre elementos, se genera un margen a la derecha de 4px de manera automática. En CSS Tricks explican diversas soluciones para eliminar este espacio. Pero aún con esta línea extra de CSS, les mostraré por qué vale la pena usar mejor este atributo.

Float vs Inline-block: Round 1

Aparentemente si vemos ambos casos de forma aislada, parece que el resultado es el mismo: Todos los bloques tienen las mismas dimensiones y se adaptan a la medida del contenedor. Funcionan exactamente igual y podríamos decir que se declara un empate.

See the Pen Float vs Inline-block by Bernardo (@25Horas) on CodePen.

Float vs Inline-block: Round 2

En este segundo ejemplo se hizo un ligero ajuste de dimensiones: Cambiamos el “width” de los bloques a 40%, de manera que los elementos automáticamente se desplazaran a una segunda línea y agregamos un elemento extra para observar como interactúa con los bloques.

See the Pen Float vs Inline-block. Ejemplo2 by Bernardo (@25Horas) on CodePen.

Como verán, aquí es cuando uno se da cuenta que usar “floats” genera más problemas. Por su naturaleza, el “float” actúa como una fuerza que alinea los elementos de forma quizás abrupta. Además que, como los elementos no alcanzan a llenar el 100% del contenedor, el div extra (aka. “Elemento Random”) ocupa el resto del espacio de forma indeseada.

Para solucionar esto, se necesitaría agregar un “div” vacío con el atributo “clear:both” y quizás el elemento afectado tendría que tener otros valores como un “display:block” o un “float:left” (algo nada recomendado). Y peor aún, para que los elementos aparezcan centrados sería necesario agregar algún contenedor extra que responda a las dimensiones para luego agregar márgenes que puedan alinear al centro.

El problema viene cuando existen muchos elementos alineados y el layout se vuelva más y más complejo. Esto por lo general causa que el HTML esté inundado del famoso “clearfix” y muchos “wrappers” o containers

Las ventajas del “inline-block”

Usar “inline-block” definitivamente es una forma más amigable de armar sitios web fluidos. Reacciona de forma amigable con el entorno de elementos y cuando las dimensiones cambian ya sea por un ajuste para la visualización en móviles u otro dispositivo, los elementos se adaptan y desplazan de forma natural. Particularmente en el ejemplo anterior, el “body” tenía el atributo “text-align:center”, lo cual afectó a los bloques con el “inline-block” y se centraron automáticamente sin necesidad de declararlo otra vez.

Atrévanse a usar este atributo para todos elementos que requieran alinearse: menús, bloques, columnas, listados, headers y footers. Si antes no dejaban de usar los floats, les será un gran alivio.

Si les gustó este tipo de post, ¡comenten y sugieran qué les gustaría aprender!


Te puede interesar

  • Marco Antonio

    Buenísimo, había oído que no era tan bueno usar float, pero no sabía de una alternativa. ¡Gracias!

  • Laura Chi

    Excelente artículo, los floats si pueden terminarse traduciendo en mucho código “extra” para solucionar el responsive, tal vez falto mencionar la compatibilidad de navegadores con el inline-block. ¿Lo soportan todos los navegadores actuales? Saludos!

    • 25Horas

      Inline-block es soportado por todos los exploradores excepto con IE 6 y 7, pero para eso, el fallback es usar “display:inline”. Más info en: http://caniuse.com/#feat=inline-block Saludos Laura!

  • Javier Mateos

    Todos flotan.

  • Diana Ronceros

    Interesante artículo, sin embargo cómo puedo solucionar (sin usar floats) que en mi header tenga un div para el logo y un nav para el menú. Alinear el logo a la izquierda y el nav a la derecha si ambos están dentro del header?
    Gracias y felicitaciones.

    • Samy Oquendo

      @media (max-width: 1081px) {

      header h1 {
      text-align: left
      }

      nav {
      text-align: right
      }

      }

      No se como tienes el codigo, pero si tienes el header alineado al centro junto con el nav en un display: block-inline y un vertical align middle o top, pues esto te serviria para tirar cada uno hacia derecha e izquierda, claro que esto solo seria visible cuando lo visualices desde pantallas de 1081px hacia arriba, para que se visualice en otras pantallas supongo que ya debes saber que mas tienes que hacer.

  • Luis

    Hola tengo algunas dudas con respecto a la mezcla de la maquetación y el código del lado del servidor, tomando como ejemplo php tengo lo siguiente:

    Fácil de comprender y mantener

    Contenido 1

    Contenido 2

    Contenido 2.5

    Contenido 3

    ================================================
    Técnica Inline
    Difícil de comprender y mantener

    Contenido 1Contenido 2 Contenido 2.5 Contenido 3

    Esto es en el caso de que solo hubiera una sola validación pero generalmente hay más, entonces se complica aun mas.

    Contenido 1Contenido 2 Contenido 2.5 Contenido 2.6 Contenido 3

    Espero alguien pueda aportar ideas con respecto a cual sería la mejor practica para mezclar esto y que quede entendible y de fácil mantenimiento por quien sea.

    Gracias!!

    • Luis

      Al parecer no introdujo el php con los ejemplos de validaciones bueno imaginenlo =) jajaja

  • Luis

    Hola tengo algunas dudas con respecto a la mezcla de la maquetación y el código del lado del servidor, tomando como ejemplo php tengo lo siguiente:

    Fácil de comprender y mantener

    Contenido 1

    Contenido 2

    Contenido 2.5

    Contenido 3

    ================================================
    Técnica Inline
    Difícil de comprender y mantener

    Contenido 1Contenido 2 Contenido 2.5 Contenido 3

    Esto es en el caso de que solo hubiera una sola validación pero generalmente hay más, entonces se complica aun mas.

    Contenido 1Contenido 2 Contenido 2.5 Contenido 2.6 Contenido 3

    Espero alguien pueda aportar ideas con respecto a cual sería la mejor practica para mezclar esto y que quede entendible y de fácil mantenimiento por quien sea.

    Gracias!!