web-dev-qa-db-fra.com

Comment faire une div pour envelopper deux div float à l'intérieur?

Je ne sais pas si c'est un problème commun, mais je ne parviens pas à trouver la solution sur le Web jusqu'à présent. Je voudrais avoir deux div emballés à l'intérieur d'une autre div, cependant ces deux divs à l'intérieur doivent être alignés au même niveau (par exemple: à gauche, 20% de la largeur du wrappedDiv, à droite, à 80%). Pour atteindre cet objectif, j'ai utilisé l'exemple CSS suivant. Cependant, maintenant, la DIV enveloppante n'a pas enveloppé tous les divs. La Div Wrap a une petite hauteur que ces deux div contenues à l'intérieur. Comment puis-je m'assurer que la division enveloppante a la plus grande hauteur en tant que divs contenue? Merci!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>liquid test</title>
    <style type="text/css" media="screen">
        body
        {
            margin: 0;
            padding: 0;
            height:100%;
        }
        #nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          height:100%;
        }

</style>
</head>
<body>
<div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
</div>
</body>
</html>
csslayouthtmlcss-float
72
WilliamLou

C'est un problème courant lorsque vous avez deux flotteurs à l'intérieur d'un bloc. Le meilleur moyen de résoudre ce problème consiste à utiliser clear:both après la seconde div.

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

Cela devrait forcer le conteneur à avoir la bonne hauteur.

72
Meep3D

Mis à part le clear: both hack, vous pouvez ignorer l’élément supplémentaire et utiliser overflow: hidden sur l'emballage div:

<div style="overflow: hidden;">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>
117
Mikael S

overflow:hidden (comme mentionné par @Mikael S) ne fonctionne pas dans toutes les situations, mais devrait fonctionner dans la plupart des situations.

Une autre option consiste à utiliser le :after tour:

<div class="wrapper">
  <div class="col"></div>
  <div class="col"></div>
</div>

.wrapper {
  min-height: 1px; /* Required for IE7 */
  }

.wrapper:after {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  content: ".";
  font-size: 0;
  }

.col {
  display: inline;
  float: left;
  }

Et pour IE6:

.wrapper { height: 1px; }
8
Thomas J Bradley

Cela devrait le faire:

<div id="wrap">
  <div id="nav"></div>
  <div id="content"></div>
  <div style="clear:both"></div>
</div>
8
jerjer

Flottez tout.

Si vous avez un div flottant à l'intérieur d'un div non flottant, tout devient vicieux. C'est pourquoi la plupart des frameworks CSS tels que Blueprint et 960.gs utilisent tous des conteneurs flottants et divs.

Pour répondre à votre question particulière,

<div class="container">
<!--
.container {
  float: left;
  width: 100%;
}
-->
  <div class="sidebar">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
  <div class="content">
  <!--
  .sidebar {
    float: left;
    width: 20%;
    height: auto;
  }
  -->
  </div>
</div>

devrait bien fonctionner, aussi longtemps que vous float:left; Tous vos <div>s.

4
Alex Lane

Utilisez ce hack CSS, cela m'a évité beaucoup de problèmes et de temps.

http://swiftthemes.com/2009/12/css-tips-and-hacks/problem-with-height-of-div-containing-floats-and-inline-lists/

Je l'utilise dans chaque projet.

3
Satish Gandham

Ici, je vous montre un extrait où votre problème est résolu (je sais, cela fait trop longtemps que vous ne l'avez pas posté, mais je pense que cela est plus propre que la correction "claire")

#nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          overflow: hidden
        }
    <div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
    </div>
2
Fernando Carrascosa

En voici une autre, que j'ai trouvée utile. Cela fonctionne même pour le design Responsive CSS.

#wrap
{
   display: table;
   table-layout: fixed; /* it'll enable the div to be responsive */
   width: 100%; /* as display table will shrink the div to content-wide */
}

ATTENTION: Mais cette théorie ne fonctionnera pas car son titulaire contient des éléments internes avec des positions absolues. Et cela créera un problème pour la mise en page à largeur fixe. Mais pour un design réactif, c'est simplement excellent. :)

ADDITION À Meep3D (~ ~ ~ ~] réponse [~ # ~]

Avec CSS3, dans une partie dynamique, vous pouvez ajouter un float clair au dernier élément en:

#wrap [class*='my-div-class']:last-of-type {
  display: block;
  clear: both;
}

Où sont vos divs:

<div id="wrap">
<?php for( $i = 0; $i < 3; $i++ ) {
   <div class="my-div-class-<?php echo $i ?>>
      <p>content</p>
   </div> <!-- .my-div-class-<?php echo $i ?> -->
}
</div>

Référence:

2
Mayeenul Islam

HTML

<div id="wrapper">
    <div id="nav"></div>
    <div id="content"></div>      
    <div class="clearFloat"></div>
</div>

CSS

.clearFloat {
    font-size: 0px;
    line-height: 0px;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 0px;
}
1
Sebachenko

À la place d'utiliser overflow:hidden, qui est une sorte de bidouille, pourquoi ne pas simplement définir une hauteur fixe, par ex. height:500px, à la division parente?

1
Mori
<html>
<head>
    <style>
        #main { border: 1px #000 solid; width: 600px; height: 400px; margin: auto;}
        #one { width: 20%; height: 100%; background-color: blue; display: inline-block; }
        #two { width: 80%; height: 100%; background-color: red; display: inline-block; }
    </style>
</head>
<body>
<div id="main">
    <span id="one">one</span><span id="two">two</span>
</div>
</body>
</html>

Le secret est le inline-block. Si vous utilisez des bordures ou des marges, vous devrez peut-être réduire la largeur de la div qui les utilise.

NOTE: Cela ne fonctionne pas correctement dans IE6/7 si vous utilisez "DIV" au lieu de "SPAN". (voir http://www.quirksmode.org/css/display.html )

1
lepe