Problem med bilder (xhtml strict/css)

Hej, jag har en div som jag vill ska innehålla två bilder. Den ena bilden täcker hela div:ens höjd och ska vara positionerad i mitten. Den andra bilden (egentligen tre bilder av lite olika storlek som kommer växlas) ska vara högerjusterad med en 10 pixels padding mot right och top.
Följande kod ger nästan rätt resultat:

<img src="images/dno.gif" style="float: right; padding-top: 10px; padding-right: 10px;"/>
<img src="images/header-image.jpg" style="display: block; margin-left: auto; margin-right: auto;"/>

Problemet är att bilden i mitten blir förskjuten av padding-right den med. Hur gör man så det blir som jag vill ha det? Jag är ingen webprogrammerare och fastnade på den här sista detaljen.

Tyvärr är den inte online just nu, men jag vet inte riktigt vad som var otydligt: Jag har två bilder: jag vill att ena ska vara centrerad i mitten. Jag vill att den andra ska vara på högersidan, men med 10 pixlars avstånd mot toppen och högerkanten. Koden jag visade flyttar båda bilderna åt vänster, dvs den i mitten är inte längre i mitten.

Klarare? Jag vet inte hur jag annars ska säga det.

#din_div {
    position: relative;
}
#mittenbild {
    margin: 0 auto;
}
#högerbild {
    position: absolute;
    top: 10px;
    right: 10px;
}

Hej teknocide och tack för koden, tyvärr blir det inte riktigt rätt i min set-up. Mittenbilden hamnar på vänster sida, men högerbilden ser ut att hamna helt rätt. Så här ser min kod ut:

div#header {
	border-bottom: solid black;
	width: 100%;
	height: 100px;
	position: relative;
}

<div id="header">
	<img src="images/header-image.jpg" style="margin: 0 auto;"/>
	<img src="images/dno.gif" style="position: absolute; top: 10px; right: 10px;"/>
</div>

Vad gjorde jag för fel? Är det kanske några av mina andra stilar på den div:en som stör eller är det nåt annat som är galet?

#header img {
    display: block;
}

Ah, tack nu ser det bra ut och jag har tagit bort width: 100%; som du tipsade om, tack så mycket!