Cómo aumentar la altura de div para incluir la imagen flotante

Question

Este es el problema. Tengo un div que incluye algunos párrafos de texto y luego una imagen que está flotando a la derecha. La imagen flota como debería pero el div que lo contiene no se expande verticalmente para adaptarse a la imagen. Sé que puedo establecer manualmente la altura del div pero esto se vuelve problemático porque me gustaría usar este mismo div para cada página de mi sitio y, por lo tanto, las alturas deberán ser diferentes.

Aquí es un ejemplo de código:

#main_contentbox { 
 
    width: 918px; 
 
    margin: 10px auto; 
 
    padding: 10px 20px 20px 20px; 
 
    background-color: #ffffff; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #000; 
 
} 
 

 
#main_contentbox img#sample { 
 
    float: right; 
 
}

<div id="main_contentbox"> 
 
    <h1 class="page"> The Event </h1> 
 
    <img id="sample" src="sample.jpg" /> 
 
    <p> 
 
    stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!</p> 
 

 
    <p>stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome! 
 

 

 
</div>

Answer 1

Puede cambiar el comportamiento de los padres cómo tratar el contenido bloques flotado cambiando la propiedad overflow. Esto debe hacerlo:

#main_contentbox { overflow: hidden; } 

Answer 2

Probar algo con JavaScript quizá:

window.onload = FixMyDiv(); 

function FixMyDiv() 
{ 
    var divh = document.getElementById('main_contentbox').style.offsetHeight; 
    var imgh = document.getElementById('sample').style.offsetHeight; 

    if(divh < imgh + 50) document.getElementById('main_contentbox').style.height = imgh + 50; 


} 

Answer 3

El uso de un pseudoclass :after, puede hacer que el div con nombre añadirá automáticamente una solución clara. Agregue esto a su archivo CSS:

#main_contentbox:after { 
    content: "Foo"; 
    visibility: hidden; 
    display: block; 
    height: 0px; 
    clear: both; 
} 

Con esto en su lugar, usted no tiene que hacer nada para forzar main_contentbox creciendo para contener sus flotadores, independientemente de la página que se encuentra.

Answer 4

Mientras @ solución Cletus es técnicamente correcto, el establecimiento de desbordamiento a cualquier valor que no sea overflow: visible (por defecto), initial (utilizar explícitamente por defecto), o inherit con un padre visible se traducirá en el elemento de la creación de un nuevo block formatting context. Un contexto de formato de bloque es una región en la que los elementos flotantes pueden interactuar con bloques. Esta situación (elemento flotante en el interior de un no desbordamiento: elemento visible) aparece explícitamente como la razón de la creación de un nuevo contexto de ser una necesidad:

"si un flotador se cruzó con el elemento de desplazamiento sería rewrap la fuerza el contenido. El reenvío ocurriría después de cada paso de desplazamiento, lo que llevaría a una experiencia de desplazamiento lento ". - mdn

Como resultado, la altura se volverá a calcular para los niños inmediatas de dentro de este nuevo contexto, y se incluirá sus alturas.

Yo prefiero usar overflow: auto de lograr esto cuando puedo, pero scroll, overlay o hidden serán todos producir el resultado deseado de incluir el flotador en el cálculo de la altura del elemento padre.