Pour employer bottom:0 il faut aussi indiquer position:absolute
Et ce bottom se calcule par rapport au premier parent positionné. Si pas, c'est le body.
Tes p sont donc dans le flux normal, si il y a de la distance entre eux, ce sont les margin/padding donnés par le navigateur (un reset css résoud le problème - regarde mon code)
Ton contenu devient donc plus important que ta hauteur, sors de son conteneur (donne une couleur de fond au div pour comprendre)
Pour faire cette boite, mais uniquement celle-là (avec des photos de 80x80), donc pas un code qu'on peut employer pour toute les autres boites, je serais dans ce genre de code minimal
Code :
<div class="mod_xx">
<img src="http://howelljonathan.free.fr/gallery/theatre/events/ambiance1/vignette.jpg" width="80" height="80" alt="un homme avec un écharpe rouge, applaudi" title="" />
<h4>Titre</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
|
Code :
* {padding:0;margin:0;} /* simple reset */ .mod_xx {overflow:hidden;zoom:1;/*clearer*/width:380px;background:#ccc; padding:5px;position:relative;} .mod_xx img {padding:2px;background:#fff;border:1px solid #000;float:left;margin:0 10px 0 0;} .mod_xx h4 {font-size:13px;} .mod_xx p {position:absolute;left:98px;bottom:5px;font-size:12px;padding:0 5px 0 0;}
|
Remarques donc le position:relative sur .mod_xx et le positionnement absolu du p
