css - posicion - Div no se expande incluso con contenido dentro

overflow css

Question

Tengo una pila de divs dentro de cada uno, todos los cuales tienen una ID que especifica solo CSS.

Pero por alguna razón, la etiqueta DIV circundante solo se expande a su valor de altura ungida, y no es automático predeterminado, lo que significa que, aunque el contenido está dentro, el DIV de respaldo tiene solo una altura específica. Lo necesito para ajustar el alto al tamaño de lo que esté dentro de él (ya que habrá datos enviados por el usuario que se reflejarán posiblemente en párrafos con más de 500 palabras).

Aquí está mi HTML

<div id="albumhold">

    <div id="albumpic">Pic here</div>

    <div id="infohold">

    <div id="albumhead">Name | Date</div>
    <div id="albuminfo">Information</div>

</div>

Y el CSS para el código HTML:

#albumhold {
    width: 920px;
    padding: 10px;
    height: auto;
    border: 1px solid #E1E1E1;
    margin-left: auto;
    margin-right: auto;
    background-color: #E1E1E1;
    background-image: url(../global-images/albumback.png);
    background-position: top center;
    background-repeat: repeat-x;
}

#albumpic {
    display: block;
    height: 110px;
    width: 110px;
    float: left;    
    border: 1px solid #000;
}

#infohold {
    width: 800px;
    background-color: #CCC;
    float: right;
    height: 20px;
}

#albumhead {
    width: 800px;
    height: 20px;
    text-indent: 10px;
    border: 1px solid #000;
    color: #09F;    
}

#albuminfo {
    margin-top: 5px;
    width: 800px;
    float: right;
    color: #09F;
    word-wrap:break-word;
}

La ayuda es muy apreciada.

Answer 1

Agregue <br style="clear: both" /> después de que el último div flotante funcionó para mí.

Answer 2

Hay dos soluciones para solucionar esto:

1. Use clear:both después de la última etiqueta flotante. Esto funciona bien
2. Si tiene altura fija para su div o recorte de contenido está bien, vaya con: overflow: hidden

Answer 3

Los elementos flotantes no ocupan ningún espacio vertical en su elemento contenedor.

Todos los elementos dentro de #albumhold flotan, además de #albumhead , que no parece que ocupe mucho espacio.

Sin embargo, si agrega overflow: hidden; para #albumhold (o algún otro CSS para borrar flotantes dentro de él ), expandirá su altura para abarcar sus hijos flotados.

Answer 4

No escribió la etiqueta de cierre del div con id = "infohold .

Answer 5

Poner un <br clear="all" /> después del último div flotante funcionó lo mejor para mí. ¡Gracias a Brent Fiare y Paul Waite por la información que flotaba divs no expandiría la altura del div principal! ¡Esto me ha estado volviendo loco! ; -}

Answer 6

Probablemente necesites una solución clara.

Prueba esto:

¿Qué métodos de ''clearfix'' puedo usar?

Answer 7

Tienes una altura fija en .infohold, por lo que el .albumhold div solo sumará hasta la altura de .infohold (20px) + .albumpic (110px) más cualquier relleno o margen que no haya incluido allí.

Intente eliminar la altura fija en .infohold y vea qué sucede.

Answer 8

div no se expandirá si tiene otros divs flotantes adentro, por lo tanto, quita el flotante de los divs internos y se expandirá ...