Comportamento strano con position: relative

[cepu96]

Salve a tutti,
http://ateam.altervista.org/prova.html
Se guardate questo esempio vedete che ci sono tre div posizionati relativamente.
Il problema è che sotto al div del "contenuto" rimane dello spazio vuoto che non capisco come levare. Specifico che la cosa è indipendente dal browser usato (IE, FF, Chrome danno tutti la stessa visualizzazione)

[Prill]

Perché sul div postcontent hai un bottom:50px.
Ma perché usare posizionamenti relativi e margini negativi quando puoi farne a meno?
Esempio:

.postsenderavatar {
	width:50px;
	height:50px;
	vertical-align:top;
	margin-right:20px;
}
.postsendername {
	font-size: 120%;
	font-weight:bold;
}
.postcontent {
	margin-left:70px;
}

indico solo le parti modificate del css (all'immagine puoi anche dare un float:left), l'html:

   <div class="post">
      [img]pippo.png[/img]
      <span class="postsendername">Pippo</span>
      <div class="postcontent">
	<div class="postprecontent">Testo</div>
	<div>ciao sono pippo</div>
      </div>
   </div>

poi possono essere regolati a piacimento margini e padding

[cepu96]

Grazie per la risposta
Così però il contenuto è attaccato al bordo in basso, non si riesce a portarlo su?

[cepu96]

Ah no scusa, risolto
Ho flottato l'immagine a sinistra e il contenuto è tornato su

Grazie mille, era tanto che sbattevo la testa su questo problema

[Prill]

Per avere più spazio in basso devi o aggiungere un margin-bottom al penultimo div oppure assegnare un padding-bottom al contenitore, col float non hai risolto, i div tendono a salire per via di quello (dopo elementi flottanti è bene interrompere il float, col clear,). Però prima di altre prove aggiungi un Doctype per fare lavorare i browser in accordo con gli standard

[cepu96]

Il problema era che il div stava giù poichè l'immagine lo costringeva, ma flottandola libera lo spazio che aveva a destra che viene occupato dal div, che sale.
Che DOCTYPE dovrei mettere secondo te?