Pb : div imbriquées

Version imprimable

13/07/2006, 14h04
TheRedLed

Pb : div imbriquées
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:

1 2 3 4 5 6 <div id="exterieur"> <div id="interieur">  </div> </div>
le css
Code:

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 :P
13/07/2006, 14h32
masu

As-tu un exemple precis ou ca déborde ?
Le probleme est-il un debordement en largeur ou en hauteur ?
13/07/2006, 14h34
10-nice

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...

HTML

Code:

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:

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. :(

Normal ton contenu est en absolute.

ton nouveau css
Code:

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)

13/07/2006, 15h10
TheRedLed

D'accord mais en réalité la page est un peu plus complexe :) et je suis quasi-obligé de mettre la div en absolute. D'ou le problème !
13/07/2006, 15h18
10-nice
tu aura toujours lemême problème alors, puisque la propriété absolute dispose un élément par rapport à la page et non au parent.

sinon tu peux mettre en relative comme ceci en ajoutant un paddong-bottom de la valeur du décalage en hauteur de ton div interieur :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #ext { width:200px; background-color:#FFFF00; padding-bottom:50px; } #int { position:relative; left:20px; top:50px; width:150px; background-color:#FF0000; }
mais ca rtevient au même, si tu explique la complexitude de ta page peut être pourra t on trouver une solution :)
13/07/2006, 16h16
TheRedLed
Ah non monsieur, je m'insurge, une div en position absolute est positionnée par rapport à sa div conteneur et pas par rapport à la page !:P

T'as qu'à essayer de remplacer le #ext de la css par ça :
Code:

1 2 3 4 5 6 7 8 #ext { position:absolute; left:20px; top:50px; width:200px; background-color:#FFFF00; }
et tu verra la #int bouger aussi !

Donc ma question était pas si con :mrgreen: et le pb est toujours là :cry:
13/07/2006, 16h27
MasterOfChakhaL
essaye de faire cela:
A la suite de ta div intérieur (toujours dans la div extérieur), tu mets cela:

Code:

<hr class="spacer" />

et dans ton css:
Code:

1 2 3 4 5 6 7 8 .spacer { visibility: hidden; margin: 0; clear: both; background-color: transparent; height: 1px; }
la règle clear both indique que le hr n'accepte pas qu'il y ait un élément, ni à gauche ni à droite...
cela devrait avoir pour consequence de pousser le reste du contenu de ta div extérieure en dessous de ta div intérieure...
13/07/2006, 16h35
masu

le coup du spacer avec clear:both ca marche aussi avec position:absolute? je pensait que ca ne marchait qu'avec les float.
13/07/2006, 17h52
MasterOfChakhaL

Citation:

Envoyé par masu

le coup du spacer avec clear:both ca marche aussi avec position:absolute? je pensait que ca ne marchait qu'avec les float.

Effectivement, il semble bien que tu aies raison...
Je croyais que le clear: both fonctionnait avec tout ce qui était retiré du flux, mais j'avais tort...

TheRedLed, je te propose de nous en dire un peu plus sur la complexité de ta page. Pour l'instant je sèche...