Deux div de même hauteur superposées ! Galère

Hello à tous,

Par mon faible nombre de messages, vous déduirez que je n'ai que très rarement recours aux forum pour me filer un coup de main, mais là c'est particulier ! Je galère...

Mon but :
Un div, en contien deux. Le conteneur aura une largeur fixe, mais une hauteur extensible.
Dans l'un des deux div imbriqués, j'ai beaucoup de texte qui ralonge le div sur la hauteur, et dans l'autre je vais mettre une animation flash qui s'adapte automatiquement à la taille du div (afin de pouvoir mettre une bordure personalisée sans se prendre le chou et surtout qui ne pèse que 1ko.)

Donc le div avec l'animation flash doit être superposé au div qui contient le texte et doit avoir la meme taille...

Exemple (qui ne marche pas): ici

Mon problème : J'aimerais que le div qui comprend l'arrière plan, occupe la totalité en vertical de mon div qui a le texte... Mais je n'y arrive pas..

Précision : une solution aurait été de mettre div qui contient le texte dans le div qui contient l'arrière plan en flash, mais cette manip dans mon cas est à éviter car l'incorporation de l'anim flash avec swfobject remplace tout le contenu du div qui accueillera le swf par l'animation elle même..

J'espère etre assez clair.. avec les illustrations ca devrais aller..

Fichiers sources:
html
css

Bonsoir,

Si j'ai bien saisi ta demande, la piste suivante devrait t'aider à parvenir à tes fins:

[b][#black]HTML[/#][/b]

<div id="conteneur">
<div id="flashContent">Mon animation Flash</div>
<div id="content">Mon contenu principal</div>
</div>

[b][#black]CSS[/#][/b]

#conteneur {position:relative; width:760px;}
#flashContent {position:absolute; height:100%; width:100%;}

Je te conseille par ailleurs la lecture de l'article suivant pour approfondir ta connaissance du positionnement grâce à CSS:
Maîtriser le positionnement CSS dans toutes les situations

Je cherche encore à comprendre ou j'ai laissé ma tete durant tout ce temps ou j'ai tourné en rond !

Ca marche au poil, jte remercie beaucoup ! J'ai eu qu'a mettre mon div contenuFlash avant mon div contenuTexte et l'affaire était dans la poche..

Merci beaucoup benj !

En fait il y a encore un petit soucis...

Voir ici.

Le div qui contien le flash se trouve par dessus le div qui contient le texte..

J'ai rajouté un z-index plus faible sur le div flash mais rien n'y fait.. Si tu (ou qqn d'autre) aurait un dernier tour magique le temps que je retrouve ma tete quelque part

CSS :

#conteneur {position:relative; width:760px;}
#flashContent {position:absolute; height:100%; width:100%; z-index:8;}
#contenuText {z-index:10;}

C'est bon solution trouvée. Suffisait de mettre sur le div page un petit position:relative ^^
Modifié par XIV-V (05 Feb 2008 - 13:11)

Aie un problème persiste encor... Mon div d'arrière plan (id='bg' ^^) ne prend pas la totalité de la hauteur du container sous ie6 uniquement....

Ptit recap simplifié de la situation :

<div id='conteneur'>
    <div id='bg'> </div>
    <div id='page'> plein de texte </div
</div

Et le css :

#conteneur{
	position:relative; 
	width:500px;
	height:100%;
	min-height:100%;
}

#bg{
	position:absolute; 
	height:100%; 
	min-height:100%;
	width:100%;
	background-color:green;
}

#page{
	position:relative;
	padding:15px;
	color:white;
}

A part l'arrière plan qui ne prend pas toute la hauteur, tout roule... j'ai vu un autre topic ici dont je me suis inspirer pour tenter de trouver une solution (qui est l'actuelle). Il me semble avoir la même chose que lui sauf que chez moi ca veut pas prendre toute la hauteur

Help ? Merci d'avance
Modifié par XIV-V (07 Feb 2008 - 15:03)

Bon hé bien la solution la voila :

J'ai fait appel à une fonction javascript dans mon body onLoad='bgSize()'; qui utilise prend le offsetHeight du div page et je l'assigne au div bg en incrémentant une marge..

Fallait y penser...

Javascript :

function bgSize(){
	var hauteurPage = document.getElementById('page').offsetHeight
	document.getElementById('bg').style.height = hauteurPage+20;
}

Modifié par XIV-V (08 Feb 2008 - 14:23)