Positionnement <img> dans <div> float

Bonjour à tous,

Je sollicite votre aide car je ne parviens pas à positionner une image dans une div float via css.
j'ai essayé les propriétés vertical-align / left / bottom / margin ... rien n'y fait.
Voici la partie html du bloc concerné:

<div id="userinfo_top_max">
	<img src="img/info.png" alt="info">
</div>

Et le css:

#userinfo_top_max{
	background: url("../img/bg_userinfo_top.jpg") bottom left repeat-x;
	width:15%;
	height:200px;
	float:right;
}
#userinfo_top_max img{
	width:16px;
	height:16px;
	bottom:0;
	left:0;
}

Je souhaite que mon image (une icône) se positionne dans le coin inférieur gauche.

Celà est il possible sans repasser par une div?

Merci d'avance pour votre aide.

Salut,

il manque position:absolute sur l'image : (re)lire le Guide de survie du positionnement CSS.

A noter que le alt="info" me laisse perplexe : est-ce qu'il s'agit bien d'une image porteuse d'information (et-si oui info me semble peu pertinent) ou bien est-ce qu'il s'agit d'une image décorative auquel cas elle devrait être en background css ou tout du moins avoir un alt vide (alt="") ?

Bonjour,

Les attribut left, right, top et bottom ne peuvent être utiliser qu'avec le positionnement absolu, relatif ou fixe ; donc pas avec le static qui est celui par défaut.

À partir du moment où tu connais la hauteur du div et celle de l'image, le plus simple est d'attribuer au div un padding de la hauteur du div moins la hauteur de l'image (par contre en cas de grossisement des caractère, cela ne fonctionnera pas), il faudra par contre revoir la propriété width du div, qui sera alors de 16px.

#userinfo_top_max{
	background: url("../img/bg_userinfo_top.jpg") bottom left repeat-x;
	width:15%;
	height:16px;
	padding-top:184px;
	float:right;
}
#userinfo_top_max img{
	width:16px;
	height:16px;
}

Salut,

Comme la dit heyon il manque la position:absolute sur l'image essai comme ça :

<div id="userinfo_top_max">
	<img src="img/info.png" alt="info">
</div>

Et le css:

#userinfo_top_max{
        position:relative;
	background: url("../img/bg_userinfo_top.jpg") bottom left repeat-x;
	width:15%;
	height:200px;
	float:right;
}
#userinfo_top_max img{
        position:absolute;
	width:16px;
	height:16px;
	bottom:0;
	left:0;
}

J'ai tester avec une image de même taille est c'est impeccable !!

Merci à tous pour vos réponses.

Mon image est je pense porteuse d'information puisqu'il s'agit d'un icône info sur une div qui s'agrandit lorsque l'on clique dessus (dévoilant ainsi les infos en question).
Sinon celà fonctionne très bien avec les indications de Viva25 merci.

Cependant, une question me tarabiscote
J'avais essayer en mettant le position:absolute sans résultat vu que je n'avais pas préciser le position:relative dans la div pensant que celà était induit par la propriété float:right.
N'est ce pas le cas en tant normal?