Io pero` userei una marcatura diversa:
codice:
<div class="Dialog">
    <div class="DialogBody">
	[img]target.jpg[/img]
	<p class="DialogBodyContent">
		This is just a prompt message as example....
	</p>
	<p class="DialogFooter">
		This is the footer (optional)
	</p>
    </div>
</div>
Ho lasciato i due blocchi Dialog e DialogBox, anche se cosi come sono non hanno molto senso (due blocchi innestati esatatmente uno nlell'altro nonservono), pensando che forse c'e` qualche altro elemento opzionale che qui non si vede.

Dopo di cio`, il CSS dovrebbe essere di questo tipo:
codice:
Dialog { /* va bene, tranne il font che e` troppo piccolo. */ }
DialogHeader:after, .DialogBody:after { /* OK */ }
.DialogBody {
	/* clear:both; - non serve */
	/* float:left; - non serve */
	padding:10px;  /* non mi piace perche` rende in modo diverso in IE */
}
.DialogBody img {
	float:left;
	/* display: inline;  - e` pleonastico - puo` servire per IE se ci sono margini */
}
.DialogBody p {
	float:left;
	width:87%;	/* forse e` un po' troppo */
	padding-top: 5px;
	/* display: inline;   pleonastico */
}
Se definisci un font in px, devi sapre che i browser possono sovrascrivere tale misura: io conun font di 9 px non leggo nulla: il mio font standard e` 14px, con un font minimo di 12px (vuol dire che tutti font piu` piccoli vengono forzati a 12)