Ciao!!!

Da molto tempo leggo html.it, e ho imparato taaaante cosine belle.... ma ora ho un problema che nemmeno leggendo le guide, i forum, gli articoli.... nada....

Allora, il mio problema è quello di sovrapporre dei div, e allora ho fatto così:

<div id="ln2" class="lnbox">
<div id="ln1_head" class="lnlabel">
codice php per prendere la categoria di un post (wordpress)
</div>

<div id="ln1_pict" class="lnpict">
codice php per prendere un'immagine di un post (wordpress)
</div>

<div id="ln1_txt" class="lnpicttitle">
codice php per prendere il titolo del post
</div>
</div>

E nel CSS ho fatto:

.lnbox {width:234px;height:140px;background-color:#FFFFFF;border: 1px solid #666666;margin-right:12px;float:left;}

.lnlabel {height:20px;color:#FFFFFF;background-color:#990000;border-bottom:1px;padding-left:10px;}

.lnpict {height:120px;width:234px;overflow:hidden;position :relative;top:0px;z-index:1;}

.lnpicttitle {height:40px;width:224px;background-image:url(images/bkg1.png);background-repeat:repeat-x;padding:0 5 0 5;position:relative;top:-45px;z-index:2;}

dove bkg1.png è un'immagine semitrasparente che si sovrappone all'immagine principale (sopra la quale ci va il titolo del post).

Arrivo al punto. Il risultato della pagina sembra corretto, la visualizzazione insomma è ok. Ma se faccio un'analisi della pagina (con web developper, add-on di firefox) pare che il div principale (il contenitore) scenda di circa 40px in più di dove dovrebbe fermarsi....

Spero di essermi spiegato... . Qualcuno mi sa dire qualcosa??
Graaaazie milleeee