Alignement vertical en bas d'une image

Bonjour,

J'ai remarqué en cherchant sur Google qu'il est très difficile d'aligner des éléments verticalement sans utiliser de tableaux. Il y a des trucs comme display: table-cell, mais ceux-ci ne fonctionnent pas avec IE<7. J'ai aussi trouvé des trucs pour centrer verticalement un élément avec des marges, mais ceux-ci demandent souvent que la division extérieure ait une hauteur fixe. Dans mon cas, elle a une longueur variable.

Voici le schéma de mon site. L'image qui s'y trouve est celle que je veux aligner en bas de la division qui la contient.
Code:

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 <body> <div id="entete"> ... </div> <div id="conteneur_principal> <div id="menu" style=" float: left; width: 200px; height: 100%;"> <ul> <li>lien 1</li> <li>lien 2</li> <li>lien 3</li> <li>lien 4</li> </ul> <img id="image_que_je_veux_aligner_en_bas" src="" alt="" /> </div> <div id="contenu" style=" width: 500px; height: 100%; float: left;"> ................. </div> </div> <div id="footer"> ... </div> </body>

Code:

vertical-align:bottom;

Salut,

La coloration syntaxique du forum met en évidence un problème de guillemet sur ton div "conteneur_principal".

Ajoute le guillemet manquant car cela peut influencer l'affichage (le document étant mal formé...)

j'ai essaye mais sa ne marche

Citation:
Envoyé par Philippe3
Bonjour,

J'ai remarqué en cherchant sur Google qu'il est très difficile d'aligner des éléments verticalement sans utiliser de tableaux. Il y a des trucs comme display: table-cell, mais ceux-ci ne fonctionnent pas avec IE<7. J'ai aussi trouvé des trucs pour centrer verticalement un élément avec des marges, mais ceux-ci demandent souvent que la division extérieure ait une hauteur fixe. Dans mon cas, elle a une longueur variable.

Voici le schéma de mon site. L'image qui s'y trouve est celle que je veux aligner en bas de la division qui la contient.
Code:

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 <body> <div id="entete"> ... </div> <div id="conteneur_principal> <div id="menu" style=" float: left; width: 200px; height: 100%;"> <ul> <li>lien 1</li> <li>lien 2</li> <li>lien 3</li> <li>lien 4</li> </ul> <img id="image_que_je_veux_aligner_en_bas" src="" alt="" /> </div> <div id="contenu" style=" width: 500px; height: 100%; float: left;"> ................. </div> </div> <div id="footer"> ... </div> </body>

Salut

Sans avoir essayé le code, si tu as fait un copier/coller, il manque toujours le " de fermeture de l'id dans la ligne <div id="conteneur_principal>

Il existe maintenant des techniques beaucoup plus simples que les éléments flottants ou les tableaux pour aligner des éléments.
As-tu regardé du coté des flex-box ? ou éventuellement des grilles ?

J'ai simplement déplacé l'image en dessous du <div id="menu"> et j'ai ajouté les styles ci-dessous :
Code:

1 2 3 4 #conteneur_principal {display:flex;} #menu {flex-basis:200px;} #contenu {flex-basis:500px;} #image_que_je_veux_aligner_en_bas {align-self:flex-end;}

Bonjour,

Merci de NE PAS déterrer des discussions datant de... 2007.