Div ne s'étend pas même avec le contenu à l'intérieur

Question

J'ai une pile de divs imbriqués les uns dans les autres, qui ont tous un ID qui spécifie uniquement le CSS.

Mais pour une raison quelconque, la balise DIV qui l'entoure ne s'étend qu'à sa valeur de hauteur nominale, et non à sa valeur automatique par défaut, ce qui signifie que bien que le contenu soit à l'intérieur, la DIV de fond n'a qu'une hauteur spécifique. J'ai besoin qu'il ajuste la hauteur à la taille de ce qui se trouve à l'intérieur (car il y aura des données soumises par l'utilisateur qui seront répercutées, éventuellement dans des paragraphes de plus de 500 mots).

#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;
}

<div id="albumhold">
  <div id="albumpic">Pic here</div>
  <div id="infohold">
    <div id="albumhead">Name | Date</div>
    <div id="albuminfo">Information</div>
  </div>
</div>

Toute aide est la bienvenue.

Answer 1

Les éléments flottants ne prennent pas d'espace vertical dans l'élément qui les contient.

Tous vos éléments à l'intérieur #albumhold sont flottants, à l'exception de #albumhead qui n'a pas l'air de prendre beaucoup de place.

Cependant, si vous ajoutez overflow: hidden; a #albumhold (ou une autre CSS pour effacer les flotteurs à l'intérieur ), il augmentera sa hauteur pour englober ses enfants flottants.

Answer 2

Il existe deux solutions pour résoudre ce problème :

1. Utilisez clear:both après la dernière balise flottante. Cela fonctionne bien.
2. Si vous avez une hauteur fixe pour votre div ou si le découpage du contenu est acceptable, choisissez : overflow: hidden

Answer 3

Vous avez probablement besoin d'une solution claire.

Essayez ça :

Quelles méthodes de "clearfix" puis-je utiliser ?

Answer 4

Ajouter <br style="clear: both" /> après la dernière div flottante a fonctionné pour moi.

Answer 5

Mettre un <br clear="all" /> après la dernière div flottante a fonctionné le mieux pour moi. Merci à Brent Fiare et Paul Waite pour l'information selon laquelle les divisions flottantes ne s'étendent pas à la hauteur de la division parent ! Cela m'a rendu fou ! ;-}