Stretch sur hauteur auto sur un bloc conteneur.. HELP !!!

Bonjour, je viens réclamer 2 minutes ou 3 de l'attention de quelqu'un qui saura m'aider dans du CSS / XHTML . Je souhaite avant tout comprendre comment je pourrais corriger mes problèmes et non une réponse toute faite.. je m'explique...

J'ai une feuille de style lambda qui contient hiérarchiquement un wrapper, un bloc centré et dans ce bloc centré 3 blocs (gauche centre et droite) .

url page de prévisualisation : http://addlive.sezam-interactive.com/
Url page de feuille de style : http://addlive.sezam-interactive.com/CSS/style_base.css

Ma question... est alors.. comment faire sous Firefox pour que la hauteur de mon #middle s'agrandisse automatiquement suivant la hauteur des div inclus dans celui ci (#main_contenu ou #main_contenu_0 ... 1 ou ...header .

D'habitude je suis plutôt à "cracher" gentiment sur IE pour ne pas respecter les standards mais aujourd'hui je me retrouve dans un cas ou je suis obligé de biaiser ma CSS en mettant un overflow pour le cas firefox : scroll et hauteur fixé sous mozilla. J'ai du faire une erreur de reflexion qqpart...

Le but recherché est que le #middle limite le bas des 3 blocs (#menu, #menu_bas, et #main_contenu) --> pour comprendre l'effet recherché je souhaite avoir sur firefox la même chose que sous IE (qui est le résultat que je recherche).

Je suis assez novice en CSS/CSS2 et viens de la programmation pure? soyez donc indulgens mais critique.... je veut apprendre des meilleurs

J'apprends tout les jours sur les forums et tutos d'alsa... notamment sur le menu gauche que vous verrez sur la page exemple du lien qui provient d'un tuto sur les menus verticaux et horizontaux (avec DL, DT, DD, UL LI)


PS : pendant que j'y suis .. je viens de réaliser un site pour un client en utilisant le positionnement relatif et absolu (que je trouve très pratique comparé à la méthode que j'utilise pour mon pb ci-dessus)...

juste le lien pour voir le résultat.
http://www.avossouhaits.fr/accueil.htm

Pierre
Modifié par Pierre13 (31 Jan 2006 - 14:44)

bonjour,
essai en appliquant a #wrapper une hauteur minilale de 100% et un overflow:auto;

#wrapper {
	width:100%;

overflow:auto;/* ce qui permet d'etirer et d'inclure les flottants,  */
background-color:#A3C2CD;
height:auto!important;/* pour tout les navigateurs sauf IE qui prend en compte la prochaine ligne */
height:100%;/* pour IE qui voit height comme un min-height */
min-height:100%;/* le min-height pour les hautres navigateurs */
/* petit defaut peut-etre pour toi, si la page est vide elle fera la hauteur de la fenetre au minimum, tu peut cependant changer les 100% pour 50%, 10%, etc ... */

	background-image:url(./images/degrade_haut.png);
	background-position:top;
	background-repeat:repeat-x;	
	padding-top:10px;
	text-align:center;
}

peut-etre devrait tu faire un peu le menage dans tes fichiers css.
On y retrouve plusieurs fois la même chose, et tu risque d'avoir beaucoup de mal a modifier ton css ....
a plus

Merci GCyrillus,

j'ai appliqué tes conseils et effectivement cela marche .. par contre ...

J'ai du l'appliquer au #middle et non #wrapper.. pour que cela fonctionne nickel.

Encore merci.