Scusate il titolo poco esplicativo!

Io vorrei ottenere una cosa abbastanza semplice, una serie di elementi uno sotto l'altro come i "botta e risposta" di facebook.
Questi elementi (per chi non lo sa) hanno una div contenente l'immagine personale con affiancato a destra il testo del messaggio, il tutto su sfondo azzurrino.

Ho realizzato questo, ma non riesco a capire dove stia l'errore
codice:
<html>
    <head>
        <style type="text/css">
            .contenitore {
                margin: 0 auto;
                width: 800px;
                font-size: 15px;
            } .elemento {
                background: #eceff5;
                clear: left;
                padding: 15px;
                max-width: 799px;
                min-width: 150px;
                text-decoration: none;
                text-align: left;
                margin-bottom: 20px;
            } .immagine {
                float: left;
                width: 15%;
                padding-right: 2px;
                padding-bottom: 4px;
                background-color: #ece;
            } .testo {
                float: left;
                width: 80%;
                padding-left: 2px;
                padding-bottom: 4px;
                background-color: #ff5;
            } .intestazione {
                color: #3b5998;
                font-size: 20px;
                font-weight: bold;
            } .messaggio {
                font-size: 15px;
            } .data {
                color: #777777;
                font-size: 11px;
            }
        </style>
    </head>
    <body>
        <div class="contenitore">
            <div class="elemento">
                <div class="immagine">
                    [img]../images/avatar/noavatar.jpg[/img]
                </div>
                <div class="testo">
                    <div class="intestazione">
                        Autore dice:
                    </div>
                    <div class="messaggio">
                        Bla bla bla
                    </div>
                    <div class="data">
                        Messaggio inserito a quest'ora
                    </div>
                </div>
            </div>
            

            <div class="elemento">
                <div class="immagine">
                    [img]../images/avatar/noavatar.jpg[/img]
                </div>
                <div class="testo">
                    <div class="intestazione">
                        Autore dice:
                    </div>
                    <div class="messaggio">
                        Bla bla bla
                    </div>
                    <div class="data">
                        Messaggio inserito a quest'ora
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
la div "elemento" dovrebbe contenere le altre due, e con il suo colore di sfondo fare in modo che a me non interessi sapere l'altezza dell'immagine ne del messaggio... Perchè tanto estendendosi allungherebbero anche la div "elemento" che le contiene!

Invece no, lo sfondo di "elemento" non si vede se non con un padding...
Qualcuno sa dirmi dove sbaglio?

(nell'esempio ho impostato gli sfondi di immagine e messaggio con colori diversi apposta per evidenziarli)