web-dev-qa-db-fra.com

Éléments DIV imbriqués

J'essaie d'enfermer deux éléments DIV, inner-1 et inner-2, (bordure rouge en pointillés) à l'intérieur d'un wrapper DIV (bordure verte unie), mais l'élément wrapper DIV ne se développe pas pour enfermer les DIV internes.

Qu'est-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>

HTML rend

cssxhtmlhtml
19
xraminx

Puisque vous flottez à la fois #inner-1 et #inner-2, vous aurez besoin d'un correction claire . Fondamentalement, la définition de overflow: auto sur le parent (#wrapper) devrait faire l'affaire.

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

Essayez ça.

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

4
anand.trex

Ce sont les flotteurs qui vous posent 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 de "div style =" clear: both ">" au bas du DIV contenant.

3
mupdyke

Comme cela a déjà été dit, vous avez besoin d'une méthode pour forcer le div contenant à réaliser que les div flottants ont pris de la place. Communément appelé effacement d'un flotteur, il y a pas mal de discussions sur le sujet autour d'Internet.

Cet article sur pathf.com est l'un des plus populaires à utiliser. Lorsque vous lisez l'article, assurez-vous de lire également tous les commentaires.

2
wlashell

Il convient également de noter qu'il existe différentes méthodes de "compensation des flotteurs". Celui-ci fonctionne assez bien pour moi et implique uniquement l'ajout d'une seule classe à l'élément parent:

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