Pb : div imbriquées

**TheRedLed** · 13/07/2006, 14h04

Bonjour, j'espère que c'est pas trop du déja vu...

Voila mon pb, c'est bien simple, j'ai une div "interieur" en position absolute à l'interieur d'une autre div "exterieur", et je voudrait que la div "exterieur" change de hauteur en fonction de la hauteur de "interieur", donc, en gros, que la div "interieur", dont la taille est variable, soit bien contenue dans "exterieur" et ne déborde pas.

Je reformule :

le html

Code :

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

1
2
3
4
5
6
 
<div id="exterieur">
    <div id="interieur">
        <!-- contenu variable -->
    </div>
</div>

le css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#exterieur{
 width:300px;
 background-color:yellow;
}
#interieur{
 position:absolute; 
 top:20px;
 left:60px;
 width:250px;
 background-color:red;
}

enfin vous voyez le genre quoi.
Je voudrait que la div exterieur s'étire pour contenir la div interieur quelque soir le contenu.

Ya-t-il une solution ?
Merci

**masu** · 13/07/2006, 14h32

As-tu un exemple precis ou ca déborde ?
Le probleme est-il un debordement en largeur ou en hauteur ?

**10-nice** · 13/07/2006, 14h34

Normallement IE adapte automatiquement la hauteur (et largeur) du conteneur en fonction du contenu. Firefox non, ceci est remarquable si on met le contenu en float, là c la cata...

**TheRedLed** · 13/07/2006, 14h51

HTML

Code :

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

1
2
3
4
5
6
7
8
9
<body>
	<div id="ext">
		ext
		<div id="int">
			a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
		</div>
	</div>
 
</body>

CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#ext {
	width:200px;
	background-color:#FFFF00;
}
#int {
	position:absolute;
	left:20px;
	top:50px;
	width:150px;
	background-color:#FF0000;
}

Là par ex, la div "int" est à l'écran complètement en dehors de "ext", ie et firefox pareil.

**10-nice** · 13/07/2006, 14h58

Normal ton contenu est en absolute.

ton nouveau css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
            #ext {
	width:200px;
	background-color:#FFFF00;
}
#int {
	margin-left:20px;
	margin-top:50px;
	width:150px;
	background-color:#FF0000;
}

ca marche

(testé IE et FF)