Hauteur de la div externe ne se développant pas avec div interne

J'ai un bodyMain div de largeur 100%. À l'intérieur, il est un corps div 800px automatique de la marge(puis-je utiliser le "corps" comme id ?). À l'intérieur ce sont deux divs bodyLeft et bodyRight 200px et de 600px de largeur respectivement. Lorsque j'ajoute du contenu à l'intérieur de la vrd ni bodyMain ni le corps se développe en hauteur . Toutes les hauteurs sont auto.

Voici le code: http://jsfiddle.net/TqxHq/18/

HTML:

<body>
    <div id="bodyMain">
      <div id="body">
        <div id="bodyLeft"> left text goes here<br />
        </div>
        <div id="bodyRight">Right text goes here
        </div>
      </div>
    </div>
</body>

CSS:

#bodyMain{
    border:1px solid red;
    width:100%;
    height:auto;

}
#body{
    border:1px solid green;
    width:804px;
    height:auto;
    margin:auto;
}
#bodyLeft{
     border:1px solid blue;
    float:left;
    width:200PX;
    height:auto;
}
#bodyRight{
    border:1px solid orange;
    float:right;
    width:600PX;
    height:auto;
}

source d'informationauteur Aamir Rizwan

  1. 35

    Vous devez ajouter 

    <div style="clear:both;"></div>

    à la fin de div flottante pour résoudre ce problème. voir
    ici

    Problème se produit lorsqu'une flottait élément est à l'intérieur d'un conteneur de la boîte et de l'élément n'est pas automatiquement le conteneur de réglage en hauteur de la flottait élément. Lorsqu'un élément est flottant, ses parents ne contient plus parce que le flotteur est retiré de la circulation. Vous pouvez utiliser 2 méthodes pour résoudre le problème:

    clear:both
clearfix
  2. 6

    C'est un problème courant lorsque l'on travaille avec des flotteurs. Il ya un couple de solutions communes:

    1. Ajouter un div après les flotteurs avec clear: both

    2. Ajouter les deux flotteurs dans un récipient avec de l'attribut CSS overflow: auto

    3. Faire le parent de l'élément flotteur

    4. À l'aide de l' :après CSS pseudo-élément avec le CSS: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

    5. Ajout d'une hauteur de l'élément parent

    Voir cet article

  3. 3

    La solution la plus simple est d'avoir div extérieure overflow:hidden (dans l'attribut style).

    Merci

  4. 2

    jsFiddle démo

    *{
    margin:0;
    padding:0;
}

#bodyMain{
    position:relative;
    overflow:hidden; /*added*/
    border:1px solid red;
    /*removed height:auto;*/
    /*removed width:100%;*/
}
#body{
    display:table;/*added*/
    border:1px solid green;
    width:804px;
    margin: 0 auto; /*improved*/
}
#bodyLeft{
    border:1px solid blue;
    float:left;
    width:200px;
    /*removed height:auto;*/
}
#bodyRight{
    border:1px solid orange;
    float:right;
    width:600px;
    /*removed height:auto;*/
}
  5. 2

    Pour éviter toute confusion avec des noms de balises, de s'abstenir de l'utilisation de bodyhtmlou head que l'identification des valeurs d'attribut.

    Je suis d'accord avec Mohammed Irfan idée. Je ne suis pas d'accord avec sa méthode. Éviter inline style, sauf pour de petits extraits. Surtout dans ce cas, car il est probable qu'il y aura un autre cas où clear: both est nécessaire. Donc, ajouter un div, donner un sens au nom de la classe et l'appliqueront CSS.

    Voir ce violon pour un exemple.