Div ne se développant pas même avec le contenu à l’intérieur

J’ai une stack de divs les uns dans les autres, qui ont tous un identifiant qui spécifie uniquement CSS.

Mais pour une raison quelconque, la balise DIV environnante ne se développe que pour sa valeur de hauteur ointe, et non par défaut auto, ce qui signifie que même si le contenu est à l’intérieur, la DIV de sauvegarde n’est qu’une hauteur spécifique. J’en ai besoin pour ajuster la hauteur à la taille de tout ce qui se trouve à l’intérieur (comme il y aura des données soumises par les utilisateurs qui seront éventuellement répercutées dans des paragraphes de plus de 500 mots).

Voici mon HTML

Pic here
Name | Date
Information

Et le CSS pour le code 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; } 

L’aide est grandement appréciée.

Les éléments flottants ne prennent aucun espace vertical dans leur élément contenant.

Tous vos éléments dans #albumhold sont flottants, à l’exception de #albumhead , qui ne semble pas prendre trop de place.

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

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

  1. Utilisez clear:both après le dernier tag flotté. Cela fonctionne bien.
  2. Si vous avez une hauteur fixe pour votre div ou si le découpage du contenu est correct, allez avec: overflow: hidden

Vous avez probablement besoin d’un correctif clair.

Essaye ça:

Quelles méthodes de «clearfix» puis-je utiliser?

Mettre un
après la dernière
flottante a été le meilleur pour moi. Merci à Brent Fiare & Paul Waite pour l’info que les divs flottants n’augmenteront pas la hauteur du div parent! Ca m’a rendu fou! ; -}

Ajoutez
après que la dernière
flottante ait fonctionné pour moi.

Vous avez une hauteur fixe sur .infohold, de sorte que la div .albumhold ne fera que s’append à la hauteur de .infohold (20px) + .albumpic (110px) plus tout remplissage ou marge que je n’y ai pas inclus.

Essayez de supprimer la hauteur fixe sur .infohold et voyez ce qui se passe.

div ne s’étendra pas s’il a d’autres divs flottants à l’intérieur, donc enlevez le float des divs internes et il se développera …

Vous n’avez pas tapé le curseur de la div avec id = “infohold .