html - img - Cómo hacer un aumento de altura div para incluir la imagen flotada

img html

Question

Este es el problema. Tengo un div que incluye unos pocos párrafos de texto y luego una imagen que está flotando a la derecha. La imagen flota como es debido, pero el div que lo contiene no se expande verticalmente para adaptarse a la imagen. Sé que puedo configurar 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í hay 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

Intente algo con JavaScript tal vez:

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 2

Puede cambiar el comportamiento de cómo los bloques principales tratan el contenido flotado al cambiar la propiedad de overflow . Esto debería hacerlo:

#main_contentbox { overflow: hidden; }

Answer 3

Si bien la solución de @ cletus es técnicamente correcta, configurar el desbordamiento en cualquier valor que no sea overflow: visible (predeterminado), initial (usar explícitamente predeterminado), o inherit con un padre visible resultará en que el elemento cree un nuevo contexto de formato de bloque . 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 dentro de un elemento no desbordante: visible) se enumera explícitamente como la razón por la cual la creación de un nuevo contexto es una necesidad:

"si un elemento flotante se intersecaba con el elemento de desplazamiento, volvería a envolver el contenido a la fuerza. El cambio se realizaría después de cada paso de desplazamiento, lo que llevaría a una experiencia de desplazamiento lento". - mdn

Como resultado, la altura se recalculará para los hijos inmediatos dentro de este nuevo contexto, y se incluirán sus alturas.

Prefiero usar overflow: auto para lograr esto cuando puedo, pero scroll , overlay u hidden producirá el resultado deseado de incluir el flotador en el cálculo de la altura del elemento principal.

Answer 4

Utilizando an :after pseudoclase, puede hacer que el div nombrado agregue automáticamente una solución clara. Agrega esto a tu archivo css:

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

Con eso en su lugar, no tienes que hacer nada para obligar a main_contentbox a crecer para contener sus flotadores, sin importar en qué página estés.