Imbriqués les éléments DIV

Je suis en train d'essayer de joindre les deux éléments DIV, intérieure-1 & intérieur-2, (pointillés bordure rouge) à l'intérieur d'une enveloppe de DIV (solide bordure verte), mais le wrapper élément DIV ne pas l'étendre à joindre l'intérieur de la Vrd.

Ce que je fais mal?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>

<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;"> 
  content inside "wrapper" div
  <div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
    content <br />
    inside <br />
    inner-1 div
  </div>

  <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
  </div>
</div>
</body>
</html>

Rendu HTML

InformationsquelleAutor xraminx | 2009-07-06
  1. 31

    Puisque vous êtes flottant à la fois #inner-1 et #inner-2, vous aurez besoin d'un claire fix. Fondamentalement, le réglage de overflow: auto sur le parent (#wrapper) devrait faire l'affaire.

    • réglage de la "width:100%" et "overflow:hidden' travaille aussi pour l'élément parent
    • Est-il vraiment pas d'autre solution que d'utiliser le Javascript? Je vais avoir le même problème, que l'extérieur de la div n'a pas de solides largeur, mais à l'aide de Javascript semble être une solution de contournement.
    • Le lien vers le clair corrigé dans le post ci-dessus a été déplacé vers ici
    InformationsquelleAutor moff
  2. 4
    .
.
.
 <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
     content inside inner-2 div 
 </div>
 <br style="clear:both" />
</div>
.
.
.

    Essayer.

    Vous pouvez définir les marges pour le <br /> de sorte qu'il est à peine visible.

    InformationsquelleAutor anand.trex
  3. 3

    C'est la flotte qui sont en vous donnant le problème.
    cela pourrait fonctionner pour vous:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>

<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;"> 
  content inside "wrapper" div
  <div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
    content <br />
    inside <br />
    inner-1 div
  </div>

  <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
  </div>
  <div style="clear: both"></div>
</div>
</body>
</html>

    Ajoutée "div style="clear: both">" au bas de la DIV contenant.

    InformationsquelleAutor mupdyke
  4. 2

    Il pourrait également être intéressant de noter qu'il existe quelques méthodes différentes de "compensation chars" là-bas. Celui-ci fonctionne assez bien pour moi et ne nécessite que l'ajout d'une seule classe à l'élément parent:

    .clearfix:after{content:"
    .clearfix:after{content:"\0020";display:block;height:0;clear:both;
visibility:hidden;overflow:hidden;}
    20";display:block;height:0;clear:both;
 visibility:hidden;overflow:hidden;}
    InformationsquelleAutor Rob
  5. 2

    Comme il a été déjà dit, vous avez besoin d'un peu de méthode, de forcer la div contenant de réaliser les divs flottantes ont pris de l'espace. Communément connu comme la compensation d'un flotteur, il existe assez peu de discussions sur le sujet autour de l'internet.

    Ce post à pathf.com est l'un des plus populaires à utiliser. Quand vous lisez l'article, assurez-vous de lire tous les commentaires ainsi.

    InformationsquelleAutor wlashell