Cómo ajustar la altura de un div para envolver a sus hijos flotados

Tengo un div envuelto alrededor de dos niños, uno flotaba a la izquierda y el otro a la derecha. Quiero poner un borde y un fondo alrededor de los niños, pero el div tiene 0 de altura ya que no cambia el tamaño para adaptarse a los niños.

Aquí hay un ejemplo de esto en acción: http://jsfiddle.net/VVZ7j/17/

Quiero que el fondo rojo baje completamente. Intenté con la altura: automático, pero eso no funcionó.

Cualquier y toda ayuda sería apreciada, gracias.

PD. No quiero usar ningún javascript si eso es posible.

Este es un problema común cuando se trabaja con flotadores. Hay varias soluciones comunes, que he ordenado por preferencia personal (el mejor enfoque primero):

  1. Use el pseudo elemento :: :: after CSS. Esto se conoce como ‘clearfix’ y funciona IE8 y superior. Si necesita compatibilidad con versiones anteriores de IE, esta respuesta debería ayudar . Ejemplo .

    .parentelement::after { content: ""; display: table; clear: both; } 
  2. Agregue los dos flotadores a un contenedor con el overflow: auto atributos CSS overflow: auto o overflow: hidden . Sin embargo, este enfoque puede causar problemas (por ejemplo, cuando una información sobre herramientas se superpone a los bordes del elemento principal aparecerá una barra de desplazamiento). Ejemplo .

     
  3. Agregue una altura de conjunto al elemento principal. Ejemplo .

     
  4. Haga que el elemento padre flote. Ejemplo .

     
  5. Agregue un div después de los flotadores con clear: both . Ejemplo .

     

Agregar overflow: hidden; envolver. Esta es una clear fix . Aquí hay un poco de documentación sobre esto: http://positioniseverything.net/easyclearing.html

LE: También existen múltiples formas de lograr esto, dependiendo de la compatibilidad del navegador:

  1. Agregar desbordamiento: oculto en el contenedor principal.

#wrap { overflow: hidden; }

  1. Use un pseudo-elemento para agregar clear: both .

#wrap:after { clear: both; content: ""; display: table;}

  1. La técnica más comúnmente utilizada es agregar un extra como último elemento del contenedor padre.

Prefiero not utilizar el tercero ya que obtienes marcado HTML adicional.

Intente agregar overflow: hidden a su div #wrap .

He comenzado a utilizar esta solución de “micro-clearfix” de Nicolas Gallagher.

http://nicolasgallagher.com/micro-clearfix-hack/

 /* For modern browsers */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ .cf { *zoom:1; } 

Solo agregue eso a su CSS y a cualquier elemento flotante, agregue la clase “cf” al envoltorio de cualquier elemento que tenga hijos flotantes.

Solo agrega una div más con estilo claro: ambas antes de cerrar una div externa, es decir, “envolver”

–Código de muestra–

 

some content at left