CSS conteneur ne s'étirer pour accueillir des flotteurs

<html>

<head>

<style type="text/css">

  .container {
      width: 900px;
      border: 2px solid #333333;
      padding-top: 30px;
      padding-bottom: 30px;
  }

  .container_left {
      border: 2px solid #FF00FF;
      width: 650px;
      float: left;
  }

  .container_right {
      border: 2px solid #0000FF;
      width: 225px;
      float: right;
  }

</style>
</head>

<body>

    <div class="container">
        <div class="container_left">
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        </div>

        <div class="container_right">
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        </div>
    </div>

</body>
</html>

Le résultat est:

CSS conteneur ne s'étirer pour accueillir des flotteurs

Je veux un résultat de ce genre:

CSS conteneur ne s'étirer pour accueillir des flotteurs

InformationsquelleAutor Jorge | 2010-01-07
  1. 36

    Ajouter overflow: hidden; à la .container sélecteur. Cela va forcer le conteneur de reconnaître qu'il a des enfants.

    • Si c'était aussi facile avec les papas fatigués! 🙂
    • C'est un très bon aperçu, je vous remercie beaucoup!
    InformationsquelleAutor Jan Hančič
  2. 24

    Donner le conteneur d'un 

    overflow: auto

    ou

    overflow: hidden

    voir sur cette page quirksmode.org pour plus de détails sur la question.

    • Merci! la bonne solution
    InformationsquelleAutor Pekka 웃
  3. 11

    Un quick fix est d'ajouter overflow: hidden à votre .container.

    Ce n'est pas la meilleure solution par dire, simplement le le plus rapide pour corriger. La meilleure solution serait de mettre en œuvre et appliquer clearfix comme il n'a pas de problèmes avec l'impression due au débordement.

    Dans le cas où vous utilisez overflow: auto ou overflow: hidden et un utilisateur tente d'imprimer la page, le contenu qui ne tient pas sur la page imprimée sera découpé en raison:

    1. barres de défilement ne s'impriment pas
    2. caché le contenu ne s'affiche pas
    • +1 parce que c'est la seule réponse qui mentionne inconvénients de la overflow méthode. Il est également intéressant de mentionner que cette méthode peut entraîner des écrêtage/barres de défilement où le contenu serait contraire débordement.
    InformationsquelleAutor Corey Ballou
  4. 5

    Une option est de les mettre dans un <div style="clear: both;"></div> juste avant la fermeture de la div conteneur.

    <div class="container">

    <div class="container_left">
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    </div>

    <div class="container_right">
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    </div>

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

</div>
    • Certainement une valeur sûre w/o un besoin pour clearfix.
    InformationsquelleAutor Daniel Vassallo
  5. 1

    à l'extérieur de la div, vous pourriez vouloir utiliser le clearfix css, a expliqué ici: http://www.positioniseverything.net/easyclearing.html

    InformationsquelleAutor John Boker
  6. 1
    .clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

    Appliquer .claire de votre élément parent.

    InformationsquelleAutor 3zzy