Displayfix: lo último en clearfix

Han pasado 5 años desde el primer artículo donde describí exhaustivamente la causa y solución más común de clearfix. Y me asombra que sigan apareciendo soluciones diferentes e innovadoras a este problema que es transversal a todos los browsers. En este artículo, muestro y demuestro el más simple (pero no versátil) de los que existen en el mercado.

Dado un contenedor que contiene uno o más elementos flotando en su interior, siempre y cuando puedas definir un ancho fijo:

#container {
   width: 600px;
   display: inline-block;
}
   .floto {
      float: left;
   }

Ver ejemplo

Este método se comporta bien cuando el ancho de los elementos interiores que están flotando es menor que el del padre; las cosas comienzan a complicarse cuando aumentan:

Ver ejemplo 2

Para contrarrestarlo, define también ancho fijo en los elementos flotantes:

#container {
   width: 600px;
   display: inline-block;
}
   .floto {
      width: 280px;
      float: left;
   }

Ver ejemplo 3

Nada es perfecto… es un método más.

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

100% alto, finalmente para todos

Segunda entrega causa directa del videocast 1. Esta vez, una muy pero muy buena y útil técnica para lograr altos de columnas de 100% respecto del contenedor. Con esto, se puede lograr que el fondo de una o ambas columnas crezcan de acuerdo a la mayor. Este problema de diseño tenía variadas soluciones anteriormente: que [...]

Formulario sin tablas (actualizado)

Usaremos un HTML lo más simple posible, para sí no tener conflictos de browsers (es bueno evitarlo desde el principio). Nótese que usé <br> en vez de <br />. Para browsers modernos esto es innecesario, pero se incluye precisamente para compatibilidad con browsers antiguos (nuevamente, para evitar conflictos). Además, se verá de todas formas en [...]

Ordenando la cabeza

Ordenando la cabeza

Muchas veces nos esforzamos en tener el código más limpio y pulcro posible, pero no nos fijamos en lo que sucede dentro del <head></head>. Es una parte vital, donde se define el comportamiento de toda la página web. Pero primero, debemos entender cómo el browser lee una página web. Cuando un navegador comienza a parsear [...]

  1. Buen tip, pero yo he visto otros que usan “overflow:auto” en el contenedor, hasta ahora me ha funcionado.

    ¿Qué piensan de eso, es ‘bueno’ usarlo?

    Chekelin
    17 / Marzo / 2011

  2. Buenas…
    Yo casi nunca uso float.. En su lugar uso algo asi:
    #menu li {
    display: -moz-inline-stack; /* FF2*/
    display: inline-block;
    *display: inline; /* IE */
    zoom:1; /* IE */
    vertical-align:top;
    margin:0 10px;
    }

    De esta forma puedo centrar todo el menu sin usar un ancho fijo..
    Hay alguna desventaja en usar esto en lugar de float?

    Saludos!

    neiker
    17 / Marzo / 2011

  3. No está nada mal, uno más para evitar el código innecesario, aunque mi preferido es el del ancho definido+overflow:hidden :-)

    Chavalina
    18 / Marzo / 2011

  4. Si, pero el inline-block me suena mucho mas coherente que el float en la mayoría de lso casos.. creo que en unos años esa va a ser la forma estándar.. :P

    Saludos!

    neiker
    21 / Marzo / 2011

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 5 veces