positionner un bloc <p> tout en bas d'une div

Bonjour tout le monde. J'ai encore un soucis pour positionner des éléments dans une div et je ne souhaite pas utiliser un tableau pour utiliser les propriétés valign de la balise <TD>.

Voila mon probleme

http://graphismebarok.free.fr/developpez/bas.gif

Je souhaiterai que chaque text soit positionné en bas de ma div.
Comme je souhaite que ma div fasse tout le temps la meme taille, elle a des dimensions strict

Code:

---

1 2 3 4 5 6 7 8 9 10

.boite_image { border:dashed 1px #CCCCCC; float:left; width:140px; margin:5px; height:120px; clear:right; text-align:center; }

---

Comment faire pour positionner mon texte encapsuler dans une balise <p></p> au plus bas de ma div sachant que les images sont de taille variable (maximum 140 de large et 100 de haut) ?

Encore une fois un valign='bottom' prendrai 10 secondes mais il parait que c'est caca...

Je vous remercie.

J'ai trouver une solution de m... Ca marche mais si quelqu'un a mieux

Code:

---

1 2 3 4 5 6 7 8 9 10

.boite_image img{ position:relative; top:-30px;   } .boite_image p{ position:relative; top:100px; }

---

et dans mon code html

Code:

---

1 2 3 4 5

<div class="boite_image"> <p></p> <img src=""' /> </div>

---

Mais j'aime pas cette solution car ce n'est pas dans cette ordre la qu'apparaissent les éléments sur la page. Donc si quelqu'un trouve quelque chose de mieux...
Merci à vous.

Code:

---

1 2 3

p{ vertical-align:baseline; }

---

ça devrait marcher si j'en crois
http://www.w3schools.com/css/pr_pos_vertical-align.asp

Malheureusement ca ne marche pas. J'ai beau lutter comme un g.... le texte ne veut pas descendre...
CSS.. quand est-ce que tu nous permettra de faire ce que l'on souhaite ?

Salut

Et avec

Code:

---

1 2 3

div.boite_image { position:relative } .boite_image p { margin: 0; position: absolute; bottom: 0; width: 100% } .boite_image img { display: block }

---

Code:

---

1 2 3 4

<div class="boite_image"> <img src="" alt="" /> <p>Mon texte</p> </div>

---

Citation:

---

Envoyé par barok

CSS.. quand est-ce que tu nous permettra de faire ce que l'on souhaite ?

---

Quand tous les navigateurs l'implémenteront correctement :)

alors j'ai fais différement

Code:

---

1 2 3 4 5 6 7

<div class="boite_image"> <div class="conteneur_image">'; <img src="../images/repertoire.jpg" /> </div>'; <div>'.$valeur.'</div>'; </div>

---

et ma css

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

boite_image { width:150px; float:left; text-align:center; border:dashed 1px #CCCCCC; margin:5px 10px 5px 8px; padding:0px; } .boite_image img { border:0; margin:0; padding:0; } .conteneur_image{ margin-top:10px; height:100px; }

---

comme ca, le conteneur de mon image fait tout le temps 100px de haut donc mon texte est situé quasiment en bas de la div principal. Vive la bidouille...
Merci à tous