Div pas le Réglage de la Hauteur Basé sur le Contenu

Je n'arrive pas à comprendre pourquoi mon info-div conteneur de ne pas ajuster sa hauteur sur la base de son contenu. J'ai un div flottante, et je pense qu'il pourrait être à l'origine du problème, mais je ne suis pas complètement sûr. J'ai un lien pour jsfiddle où vous pouvez voir le CSS et le HTML si ça aide. Toute aide est grandement appréciée!

Voici le CSS pour l'info-numéro du conteneur tenue le flotteur et toutes les autres informations

    #info-container{
    position:relative;
    padding-bottom:20px;
    padding-top:20px;
    padding-left:10px;
    padding-right:10px;
    margin-left:auto;
    margin-right:auto;
    background:#6F90A2;
    min-width:1000px;
    max-width:1000px;
    clear: both;
    height:auto;
}

http://jsfiddle.net/r35K4/

OriginalL'auteur Tyharo | 2014-08-04

  1. 42

    Ajouter overflow:auto; à #info-container.

    jsFiddle exemple

    Flottant sur l'élément enfant retire de la circulation des documents et de la mère va s'effondrer. En ajoutant le dépassement de la règle, le comportement désiré est restauré.

    Merci pour la réponse rapide et l'aperçu sur les flotteurs, vous étiez sur place!

    OriginalL'auteur j08691

  2. 6
    #info-container{
    overflow: auto;
}

    OriginalL'auteur Anisuzzaman Khan

  3. 4

    Vous avez besoin de ce qui est connu comme le CSS clearfix. Ceci peut être réalisé avec le CSS suivant.

    #info-container:after {
    clear: both;
    content: "";
    display: table;
}

    Exemple De Travail

    Cela va créer un pseudo-élément de la force de l'emballage pour envelopper le flottait enfants.

    C'est sans doute une solution plus propre que l'ajout d'un overflow de propriété, la propriété overflow a d'autres usages et selon les cas, peut causer des problèmes cachés de débordement ou à l'intérieur des barres de défilement.

    OriginalL'auteur Alexander O'Mara

  4. 2

    jsBin démo

    Créer une classe CSS:

    .clear:before,
.clear:after {
  content:" ";
  display:table;
}
.clear:after {
  clear:both;
}

    et simplement l'appliquer à votre 

    <div id="info-container" class="clear">

    ou à tout autre élément qui contient Flottait éléments que vous rencontrez des problèmes avec.

    Si vous voulez faire plus simple, l'utilisation

    overflow : auto;

    pour tout parent de l'élément contenant flottait enfants, si vous êtes en mesure de le faire en raison du fait que deviendra un débordement élément

    OriginalL'auteur Roko C. Buljan