Discussion :

[kodokan]

Bonjour

J'ai un div qui contient plusieurs div à l'intérieur. J'aimerais savoir comment je dois faire pour adapter la taille du div conteneur à ceux qui sont à l'intérieur (dont la longueur peut changer)

merci

[Fluckysan]

Les divs se redimensionnent toutes seules suivant leur contenu :o

[ilood]

Salut

Les divs se redimensionnent toutes seules suivant leur contenu :o

Non. Les div ont par défaut une taille qui occupe tout la largeur de leur conteneur, ou la taille qu'on leur a spécifié grâce à l'attribut width.

@kodokan : a part faire passer en display: inline le div je ne vois pas (il existe peut-être une autre solution).
Mais faire passer un div en inline peut présenter quelques inconvénients.

[trotters213]

si tu ne donne pas de taille à ton conteneur mais que tu en donnes aux contenus ça devrait être bon.
Qu'est ce que tu veux faire au juste?

[kodokan]

En fait j'ai un div (div#content) avec à l'intérieur 3 divs(un pour le menu, un autre pour le texte et un dernier pour les annonces) qui ont comme propriété float:left; Le problème c'est que lorsque j'ajoute du texte dans le div pour le texte , le div#content ne s'adapte pas automatiquement à la taille du div de la zone de texte

[trotters213]

et bien donne une largeur à tes 3 div contenus dans #content.
Tu la donne en % ainsi si tu redimensionne ta page, la largeur sera proportionnelle à la page.

[Bisûnûrs]

Essaye de ne pas spécifier de hauteur pour ton div conteneur.

[kodokan]

Meme avec vos solutions sa marche pas sous FF que sur IE
Si sa peut vous aider :

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<div id="content">
<div id="menu_gauche">
<ul id="menu_gauche_txt">
      <li class="active">
      <a href="#">Connexion</a>
      </li>
      <li>
      <a href="#">News</a>
      </li>
      <li>
      <a href="#">Liste des blogs</a>
      </li>
      <li>
      <a href="#">Charte d'utilisation</a>
      </li>
      <li>
      <a href="#">Faq</a>
      </li>
      <li>
      </li>
      <li>
      <a href="#">Contact admin</a>
      </li>
 
</ul>
</div>
<div id=zone_txt>
  <ul>
 <li>texte</li> 
 </ul>
</div>
  <div id="box">
 <h3>Top 10 utilisateurs </h3>
 <p>MOn txt</p>
 </div>
<br>
 
</div>

ET le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
div#container{width:900px;margin: 0 auto;background-color: #C0CDF2;text-align: left; height:inherit}
 
div#header{background-color: #0B70C1;padding:10px 0}
 
div#header h1{color: #FFF;font-size: 300%;font-weight: 900}
 
 
ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
 
div#menu_gauche{background:#0B70C1; width:120px; float:left; margin: 0px 10px 0px 5px;}
 
ul#menu_gauche_txt li,ul#menu_gauche_txt{ list-style-type:none; margin:0px; padding:0px;}
ul#menu_gauche_txt{ padding-left:10px; margin-bottom:15px}
ul#menu_gauche_txt a{ text-decoration:none;color: #999;background:#0B70C1;}
ul#menu_gauche_txt li.active a,ul#menu_gauche_txt a:hover{color: #FFF}
 
div#zone_txt{margin-left:5px; width:600px; background:#E4E7F2; float:left; margin-bottom:15px}
div#zone_txt ul{padding-left:15px;}
div#zone_txt li {list-style:none;}
div#content{clear:left;width:900px;border-top:1px solid #999;padding-top:15px;background-color: #C0CDF2; }
div#footer{padding-top:5px;text-align: center;font-size: 90%;background: #8395CB;color: #FFF;}
 
div#box {float:left;width:130px;margin-left: 15px; margin-right:5px;background:#0B70C1; margin-top:-17px; margin-bottom:15px}
div#box h3 {font-size: 12px;margin:0;padding: 0 0 3px;background: #003366;color: #fff;text-align: center;height:20px; font-size:12px}
div#box p{margin:0;padding: 5px 10px;line-height: 1.3;text-align: justify}

[trotters213]

quelques remarques :
pense à indenter ton code HTML
pense à aller à la ligne dans ton CCS sinon c'est vite déroutant
ça ne sert à rien de sprécifier le type de balise de tes ids dans ton CSS

[kodokan]

Bon j'ai résolu le pb en fait c'est dû à la propriété float du zone_txt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div#zone_txt{margin-left:5px; width:600px; background:#E4E7F2; float:left; margin-bottom:15px}

En enlevant le float et en faisant ceci sa marche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div#zone_txt{margin-left:170px; width:700px; background:#E4E7F2; margin-bottom:15px ;}