Aligner une class en bas a droite d'un ID

Bonjour a tous,

Je vient vous voir car j'ai un problème:

J'ai une id qui se nomme header, elle fait 323px de haut, l'image (header.png) en fait 227px, dans cette div j'ai une autre div class motif et celle ci doit ce placer en bas a droite du header pour donner le résultat suivant :

L'image du motif est les fleurs qui sont en bas a droite.
http://nsa14.casimages.com/img/2010/04/25/100425121456629415.png

Voici mon CSS et mon html si ça peut servir :

		<div id="site">
        	<div id="menu">
            
            </div>
            
            <div id="header">
            
            	<div class="motif" >
                	<img src="images/motif-header.png" />
                </div>
            </div>
            
        </div>

@charset "utf-8";
/* CSS Document */

*{margin:0; padding:0;}

body{
	background:#d0d0d0;
}
#site{
	width: 850px;
	height:1213px;
	margin-left:auto;
	margin-right:auto;
}

#menu{
	width:850px;
	height:108px;
	background:url(../images/menu.png) no-repeat;
}

#header{
	width:850px;
	height:323px;
	background:url(../images/header.png) no-repeat;
}
.motif{
	float:right;
	position:bottom;
	vertical-align:bottom;
}

Une dernière question, Z-index pourra mettre utile pour l'affichage du block sous le header ? Car la fleur doit être par dessus, et l'image doit être un lien , donc il y a il un moyens fiable pour que ma boite newsletter,gallery soit sous ma fleur?

Merci

Il te suffit d'utiliser les propriétés suivantes pour .motif : position: absolute;, bottom: Ypx;, et right: Xpx;. Si tu donnes les valeurs 0 à bottom et right, alors le coin inférieur droit de .motif sera aligné avec celui de #header. Tu peux donc jouer avec des valeurs négatives pour que ton motif dépasse un peu du header sur la droite et en bas, comme sur ton screenshot.

Petit détail important, tout de même : position: absolute; indique à un élément qu'il doit se placer de manière absolue par rapport au premier élément parent qui est lui aussi positionné, que ce soit avec de manière absolue ou relative. Il te faudra donc, puisque tu veux que ça s'aligne par rapport à #header que tu ajoutes position: relative; à ce dernier.

--- édit -----
Oh, et oui, en mettant ajoutant z-index: 10; à .motif, tu seras tranquille (j'ai choisi la valeur 10 arbitrairement ; il te suffit de mettre une valeur supérieur à celle des autres blocs qui doivent être placés en-dessous, qui vaut 0 par défaut).
Modifié par phpdoesnotcare (25 Apr 2010 - 12:53)

Super merci beaucoup ça marche du tonnerre, a ce que je voit je vais devoir réviser mon html et mon css parce-que des fois je galère pas mal .

Merci