Bild in <div> unten ausrichten

[Kuler]

Liebe ForumsbesucherInnen,

Ich bin gerade dabei eine Seite mit HTML und CSS zu programmieren.
Ich habe eine CSS-Datei angelegt: 'styles.css' Und ich habe eine HTML-Datei: 'index.htm' (und weitere). Im Quelltext der HTML-Datei wird die CSS-Datei aufgerufen.

Um verschiedene Blockelemente auszurichten habe ich den entsprechenden Quelltext in der CSS-Datei. Es soll unter anderem ein Blockelement rechts ausgerichtet werden. das sieht so aus:

#rechts {
   position:absolute;
   top:15%;
   left:80%;
   width:20%;
   height:85%;
   background-color:#8989e8;
        }

... und funktioniert. Nun soll an dessen unteren rechten Rand mit CSS ein Bild 'bild.gif' ausgerichtet werden.
Dafür existiert die CSS-Klasse "rechts" (Ich denke hier liegt irgendwo der Fehler!?)

.rechts {
   text-align:right;
   vertical-align:bottom;
        }

Im HTML-Text steht dann:

<div id="rechts" class="rechts">
  <img src="bild.gif">
</div>

Das Bild wird aber nicht am unteren Rand des Blockelements ausgerichtet, sondern bleibt oben. Rechts ausgerichtet wird es.

WAS HABE ICH FALSCH GEMACHT?

Dank im Voraus,
Kuler