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

Esas botoneras: centrándolas

Uno de los temas más complicados a la hora de estructurar y diagramar un sitio, es cuando existen formularios. Creo que es el más difícil, ya que a pesar de tener un buen CSS reseter a mano que te ayude a setear esas propiedades en todos los browsers, aún así hay elementos que no obedecen [...]

Menú con tabs con CSS, jQuery y Mootools

Esos menúes tipo tabs ó con subniveles tanto horizontales como verticales, son muy útiles al momento de desplegar grandes cantidades de navegación sin ser invasivos con el espacio. Puedes arquitecturar toda la estructura de tu sitio de manera tal que el usuario pueda encontrar fácilmente la información que desee, sólo con ir descubriendo con el [...]

Maniático del código

Al escribir tu código fuente, seguro tienes ya la manera en que acostumbras a hacerlo. Si utilizas uno de los tantos editores de código, seguro confías en lo que te escribe, lo que usualmente es desordenado y lleno de basura. Pero no hay como un código, tanto HTML como CSS y JS limpio, pulcro, ordenado [...]

  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
Cargando