Immagini accavallate

[alexicaro]

Ciao ho un problema di questo genere:

dato il seguente codice:

<div class="news_front"> [img]img/immagine_esempio.gif[/img]
<div class="titolo">Titolo della notizia breve </div>


(gg/mm/aaaa) - Abstract della notizia che potrebbe continuare</p>
</div>
<div class="news_front">
[img]img/immagine_esempio.gif[/img]
<div class="titolo">Titolo della notizia che potrebbe essere lungo su più righe</div>


(gg/mm/aaaa) - Abstract della notizia che potrebbe continuare anche per un bel pezzo con periodi lunghi e prolissi che si ripetono all'infinito Testo della notizia che potrebbe continuare anche per un bel pezzo con periodi lunghi e prolissi che si ripetono all'infinito Testo della notizia che potrebbe continuare anche per un bel pezzo con periodi lunghi e prolissi che si ripetono all'infinito</p>
</div>

Le immagini tendono ad accavallarsi come nel file immagine allegato. Gli stili fanno ben poco in questo caso ma non riesco a capire come risolvere la questione.

ecco il codice degli stili che governano i div:

#main .news_front {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CDE5FF;
margin-top: 0.2em;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
}
#main .news_front img {
float: left;
margin-right: 5px;
margin-bottom: 5px;
display: block;
page-break-after: avoid;
}


Idee?
grazie mille

[Mich_]

Come dire che se la notizia precedente e` breve, l'immagine esce dal contenitore che dovrebbe contenerla assieme al testo.

Puoi ovviare inserendo alla fine della notizia, un

invisibile (o un <hr>, che taluni sconsigliano), con un clear, in modo da contenere tutto dentro il <div>

<div class="news_front">
  [img]img/immagine_esempio.gif[/img]
  <h2>Titolo della notizia breve </h2>
  

(gg/mm/aaaa) - Abstract della notizia che potrebbe continuare</p>
  <p class="chiudi"> </p>
</div>

CSS:
p.chiudi {
  font-size: 1px;
  clear: left;
  /* eventualmente height: 1px; */
}

Nota che usare un<div> per un titolo e` semanticamete sbaglaito: per i titoli si devono usare i tag <h1>, <h2>, ...
Supponendo un <h1> per il titolo della pagina, nell'esempio ho usato <h2>.