Text unten ausrichten - klingt einfach?!?

Hallo.

Mein Problem ist folgendes:

<div class="commentBox">
	<div class="commentText"><?php comment_text() ?></div>
        <div class="comcite">[...]</div>
</div>

Der Container "commentBox" hat (logischerweise) eine variable Höhe und er hat ein Hintergrundbild welches mit "bottom" formatiert ist.
Die Container "commentText" und "comcite" sollen jetzt beide am unteren Rand von "commentBox" anliegen. Allerdings haben auch sie eine variable Höhe (je nachdem wie lang der Kommentar eben ist). Bei langen Kommentaren (die bis unten reichen) klappt das auch wunderbar, aber bei kurzen Kommentaren sieht es eben nicht so aus (s. Anhang)
vertical-align fällt weg, da es sich um Block-Level-Elemente handelt (soweit ich bisher gelesen habe). What to do?

exakt 190px (es wird nach oben allerdings transparent wie man sieht)

Zitat von ratterobert

dann vermute ich mal, dass sich die grafik unter den kommentar schiebt. wie sieht die transparenz im IE aus?

sorry, den satz verstehe ich nicht so recht. natürlich ist die grafik unter dem kommentar, soll sie ja auch...
Die Transparenz sieht im IE gar nicht aus, weil es sich um eine png-datei mit alpha-channel handelt, und das kapiert der IE ja nicht.

das theme läuft im moment nur auf einer xampp-installation auf meinem rechner, daher kann ich leider keinen link geben. aber den code natürlich gerne...

Auszug aus der comments.php:

<div class="commentBox">
	<div class="commentText"></div>
	
<div class="comcite"><?php comment_type(__('Comment'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> am
    <?php comment_date('l, d.n.y') ?> um <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a> <?php edit_comment_link(__("edit"), ''); ?></div>

style.css:

.commentBox {
	position: relative;
	margin: 0 auto;
	width: 380px;
	min-height: 190px;
	overflow:hidden;
	background: url('images/commentbg.png') no-repeat bottom;
	padding-bottom: 44px;
}


.commentText {
	color: #b09f02;
	text-align: justify;
	max-width: 354px;
	margin-left: 12px; 
}


.comcite {margin-left: 12px;	max-width: 354px;	margin-top: -7px;}
.comcite, .comcite a, .comcite a:visited {
	font-size: 7pt;
	color:#685341;
}

Vielen Dank schonmal...

dank pichfl sieht das ganze jetzt so aus:

<li class="comment">
	
	<div class="content"><?php comment_text() ?></div>
		
		<cite class="about"><?php comment_type(__('Comment'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> am
			<?php comment_date('l, d.n.y') ?> um <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a> <?php edit_comment_link(__("edit"), ''); ?>
		</cite>
	</li>

ol#comments li.comment div.content {
	color: #b09f02;
	text-align: justify;
	max-width: 354px;
}


ol#comments li.comment cite.about {
	max-width: 354px;	
	display:block; 
	font-style:normal;  
	font-size: 7pt; 
	color:#685341;
	padding-bottom: 17px;
	clear: left;
}


ol#comments{ 
	margin:3em 0 2em 0; 
	padding:.1em 0; 
}


ol#comments li.comment{ 
	list-style-item:none; 
	display:block; 
	margin: 0; 
	padding:30px 0 30px 12px; 
	background:transparent url('images/commentbg.png') 0 100% no-repeat; 
}


ol#comments li.comment div.content {
	color: #b09f02;
	text-align: justify;
	max-width: 354px;
}


ol#comments li.comment cite.about {
	max-width: 354px;	
	display:block; 
	font-style:normal;  
	font-size: 7pt; 
	color:#685341;
	padding-bottom: 17px;
	clear: left;
}


ol#comments li.comment cite.about a, ol#comments li.comment cite.about a:visited{ color:#685341; }

...und funktioniert wunderbar.