la force d'un div pour contenir flottait enfant divs

Je suis en train de personnaliser le thème twentyeleven dans WordPress.
Il a 2-columns layout créé par:

<div id="main">
     <div id="primary"></div>
     <div id="secondary"></div>
</div>

et

#main {
    clear: both;
    padding: 1.625em 0 0;
}
#primary {
    float: left;
    margin: 0;
    width: 100%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

Je ne suis pas sûr qu'il y a d'autres propriétés css à l'intérieur de style.css que je n'ai pas reconnu. De toute façon, l'enfant divs se situent en dehors de #main. Comment puis-je la force à l'enfant divs contenues dans #main? (à l'exception de la réduction de la largeur de #primary, qui ne donne aucun effet sur moi)

Trois réponses tout aussi acceptable. Merci de me suggérer lequel les valeurs "a accepté de répondre à" vérifier.

OriginalL'auteur tic | 2012-08-15

  1. 19

    Vous devez ajouter overflow: auto à #main:

    #main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}
    Pourquoi ce travail? SOCIÉTÉ et W3c sont une sorte de flou sur ce overflow: auto n' (d'ailleurs en disant que c'est UA-dépendant) et je suis effrayée à l'utilisation de CSS que je ne comprends pas. overflow: hidden et overflow: scroll semblent tous deux pour obtenir le même effet, mais je ne sais pas pourquoi travail, soit.
    href="http://www.quirksmode.org/css/clearing.html" >quirksmode.org/css/clearing.html
    Ce lien (que j'avais déjà trouvé depuis d'affichage) ne contiennent pas toute l'explication de pourquoi (à peu près juste "waouh, ce qui fonctionne"), mais il y a une tentative d'explication de la mécanique à l' stackoverflow.com/a/16056509/1709587 qui semble décent à un coup d'œil. J'ai besoin de lire plus loin.
    overflow: auto; Qui fonctionne.
    Je l'ai déjà fait remarquer que ce n'était pas de travailler sur les dernières versions de chrome, c'était mal, mais vous avez besoin pour vous assurer que votre élément a display: block dans l'ordre pour que cela fonctionne. Vous pouvez également utiliser display: flow-root, mais le soutien pour elle n'est pas

    OriginalL'auteur Blender

  2. 9

    Vous devez utiliser le clearfix la méthode du pseudo-élément :after parce que dans votre cas, le clair n'est pas vraiment appliqué après que les enfants.

    #main:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; 
}

    http://jsfiddle.net/zfsjb/

    OriginalL'auteur LeBen

  3. 1

    Essayer de donner width: 100%; position:absolute à #main.

    Ici est un travail de Démonstration en Direct

    OriginalL'auteur blasteralfred Ψ