Anzitutto il CSS postato ha delle contraddizioni: Un oggetto float non puo` essere inline, per cui poi probabilmente non funzionano altre cose.
Del resto un <img> di default e` inline, per cui non ha bisogno del float:left.

Poi devi scegliere se usare i CSS o usare la formattazione HTML. Le due cose (formattazione CSS e formattazione HTML) vanno in conflitto, e browser diversi risolvono i conflitti in modi diverso, quindi non riuscirai ad avere una cosa funzionante se mescoli le formattazioni.
La programmazione moderna richiede di eliminare tutte le formattazioni HTML, e usare solo formattazione CSS.

Quello che puoi fare e` una cosa del tipo:
codice:
HTML:


 eventuale testo
  [img]...[/img]
  il resto del testo
  ...
</p>


 eventuale testo
  [img]...[/img]
  il resto del testo
  ...
</p>

CSS:
p {
  width: ...;   /* non e` obbligatorio, ma aiuta */
}
p:after {
  clear: both;
  ecc. vedi [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float
}

.sin {
  float: left;
  margin: 0 8px 8px 0;
}
.des {
  flaot: right;
  margin: 0 0 8px 8px;
}