CSS e DIV con adattamento altezza variabile

[angelicab]

sto realizzando una playlist di video (tipo i video correlati di Youtube)
visualizzo i dati relativi ad ogni video in un DIV con un tag A per ognuno..
tra i dati ho:

IMG TITOLO
DESCRIZIONE
DURATA

il problema è che la Descrizione è un testo variabile (possono esser poche parole come qualche riga ..) e quindi vorrei che l'altezza del riquadro di ogni video si adattasse al contenuto..

questo il codice del DIV:

<div id="playlist">
	<a href="video1.flv">
		[img]/img/demos/thumb1.jpg[/img]
		Titolo del video

qui la descrizione con testo di lunghezza variabile		
		durata 0.22
	</a>
	<a href="video1.flv">
		[img]/img/demos/thumb1.jpg[/img]
		Titolo del video

qui la descrizione con testo di lunghezza variabile		
		durata 0.22
	</a>
</div>

e questo il file CSS associato:

/* playlist style */
#playlist {
	width:312px;
	height:350px;
	overflow-y:auto;
	overflow-x:hidden;
	border:1px solid #ccc;
	padding:4px 8px 7px 10px;
	/*background-color:#efefef;*/
	margin-top:25px;
	float:left;
}

/* playlist entry */
#playlist a {
	display:block;
	width:280px;
	height:150px;
	padding:7px;
	background-color:#fff;
	border:1px solid #ccc;
	font:11px "bitstream vera sans", "lucida grande",verdana;
	text-decoration:none;
	margin-top:7px;
	color:#666;
}

/* different states of a playlist entry */
#playlist a:hover {
	background-color:#ffc;		
}

#playlist a.progress {
	background-color:#efefef;	
}

#playlist a.playing {
	border:1px solid #666;
	background-color:#ffc;	
}

#playlist a.paused {
	border:1px solid #666;
	background-color:#ffc;	
}

/* elements inside playlist entry */
#playlist a img {
	border:0;	
	float:left;
	margin-right:10px;
}

#playlist a strong {
	color:blue;		
	padding-bottom:5px;
}

#playlist a em {
	border:0;	
	float:left;
	margin-right:10px;
	background:url(/jquery/img/clock.gif) no-repeat 0 50%;
	padding-left:20px;
	color:#333;
	font-style:normal;
	margin-top:10px;
}