div rendu à l'extérieur du conteneur

J'ai commencé un modèle sur une page et pour une raison quelconque l'un de mes DIVs (#content) est rendu à l'extérieur de la principale "conteneur" div. J'ai regardé et regardé et ne peut pas trouver quelque chose il n'y a rien de mal avec mon code?

Merci d'avance.

Kiz

CSS:

#container {
width:1000px;
margin:0 auto;
background-color:#000;
}

#top {
height:100px;
margin:0px 0px 50px 0px;
background-color:#F00;
}

#navigation {
width:720px;
height:100px;
float:left;
background-color:#0F0;
}

#logo {
width:180px;
height:100px;
float:right;
background-color:#00F;
}

.clear {
clear:both;
}

#content {
margin:0 auto;
background-color:#FF0;
}

Et voici le code HTML:

<div id="container">
  <div id="top">
    <div id="navigation">Navigation goes here</div>
    <div id="logo">Logo</div>
    <div class="clear" />
  </div>
  <div id="content">Content goes here
  </div>
</div>
Semble bien pour moi.
Où est exactement #content rendu? Le code semble correct.
J'ai oublié d'ajouter overflow:auto comme @benhowdle89 souligné. Il a été rendu à l'extérieur du récipient...
C'est ce que j'appelle html-de la magie: jsfiddle.net/hobobne/qxYHN Comme vous pouvez le voir, lorsque vous ajoutez une bordure ou d'un peu de rembourrage à #conteneur, puis le fond noir de #container vient visibles. J'ai cette anomalie avant, mais je ne me souviens pas de mon fix pour elle..au moins pour l'instant..

OriginalL'auteur zik | 2011-07-26

  1. 18
    #container {
overflow: auto;
}
    Génial, qui a travaillé, pensé que c'était quelque chose de stupide comme ça. :S Merci!
    Pas de problème! : )
    désolé, cette réponse est de 5 ans, pourquoi le rendu de contenu en dehors de la div parent? et pourquoi overflow: auto résolu ce problème? J'ai passé 3 heures à essayer de la réparer, et ne le pouvait pas.

    OriginalL'auteur benhowdle89

  2. 0

    Ok, le problème semble être que votre clear: both; éléments ont été clôturés div. Doit avoir été balises br. Donc, fondamentalement, qui semblait résolu la plupart des choses. - Tu pas que, bien sûr, pourquoi le #top doit être réglé en hauteur: 100px;, si les éléments à l'intérieur de régler la hauteur de toute façon..même si ils sont flottants.. alors définir la fin.

    Violon: http://jsfiddle.net/hobobne/qxYHN/1/

    En gros, j'ai résolu un problème très important dans votre mise en page et mon chemin n'a pas besoin de overflow: auto;.. Mais peu importe...
    Je ne vois pas ce que le "critique" problème est, il valide XHTML 1.0 strict, très bien...
    Ok, qu'est-ce qui est apparu essentiel, ne l'est pas. Cependant, toujours à l'aide de br au lieu de div que le clear: both; variable, semble pour l'élimination de la #container n'affichant pas-correctement-problème.
    Je vois. Ce n'était pas que le #conteneur n'affiche pas correctement. Le '#contenu' a l'affichage à l'extérieur de l' '#container'. Merci tout de même.

    OriginalL'auteur Kalle H. Väravas