Ayuda - Float y cambio de altura

[aviacioncr]

Saludos,

Estoy intentando crear una tabla para mostar los temas de mi foro utilizando CSS, en lugar de tablas html.

Mi problema es que tengo que fijarle una altura fija al div para que se muestre correctamente, de lo contrario se desordena el contenido. No me es práctico tener una altura fija ya que el contenido puede variar y no se va a mostar como se debe.

Ejemplo de cómo de ve

Utilizando un HEIGHT de 60px


Sin utilizar HEIGHT fijo


Utilizando HEIGHT 30px


Código que utilizo
CSS:

Código:

#foro-temasContenedor {
	font-family: Arial;
	font-size: 12px;
	margin: 0px auto 10px auto;
	text-align: left;
	width: 780px;
}

/****************************************************************************************/
/* Cabecera de los temas */
#foro-temasCabecera {
	text-align: center;
	background-color:#666;
	color:#FFF;
	height:15px;
}

#foro-temasIcono {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 30px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaTema {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 290px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaRespuestas {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 80px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaVistas {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 60px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaCreado {
	margin: 0px 1px 0px 0px;
	float:left;
	width: 150px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #CCC;
}

#foro-temaUltimaRespuesta {
	float:left;
	width: 150px;
}

/* Temas */
#foro-temasLista {
	padding: 3px 0px 3px 0px;
	text-align:center;
	color:#000;
	height: 30px;
}

#foro-temasLista p{
	padding-bottom: 20px;
	padding-top: 0px;
	margin: 2px 0px 2px 0px;
}

#foro-temasLista a {
	font-weight: bold;
	text-decoration: none;
	color: #369;
}

.claro {
	background-color:#E5E5E5;
}

.oscuro {
	background-color:#CDCDCD;
}

.izquierda {
	text-align: left;
}

.pequeño {
	font-size: 10px;
}

HTML

Código HTML:

<div id="foro-temasContenedor">
  <div id="foro-temasCabecera">
  	<div id="foro-temasIcono">&nbsp;</div>
    <div id="foro-temaTema">Tema</div>
    <div id="foro-temaRespuestas">Respuestas</div>
    <div id="foro-temaVistas">Vistas</div>
    <div id="foro-temaCreado">Creado</div>
    <div id="foro-temaUltimaRespuesta">Ultima respuesta</div>
  </div>
 
  <div id="foro-temasLista" class="oscuro" >
  	<div id="foro-temasIcono"><p>[X]</p></div>
    <div id="foro-temaTema" class="izquierda"><p><a href="a">El primero tema de la categoria 2, con texto para llenar la segunda línea</a></p></div>
    <div id="foro-temaRespuestas"><p>0</p></div>
    <div id="foro-temaVistas"><p>0</p></div>
    <div id="foro-temaCreado" class="pequeno"><p>17/03/2010, 06:35:57 PM</p></div>
    <div id="foro-temaUltimaRespuesta" class="pequeno"><p>17/03/2010, 06:35:57 PM</p></div>
  </div>
 
  <div id="foro-temasLista" class="claro" >
  	<div id="foro-temasIcono"><p>[X]</p></div>
    <div id="foro-temaTema" class="izquierda"><p><a href="a">Otro para la 2</a></p></div>
    <div id="foro-temaRespuestas"><p>0</p></div>
    <div id="foro-temaVistas"><p>0</p></div>
    <div id="foro-temaCreado" class="pequeno"><p>17/03/2010, 06:36:03 PM</p></div>
    <div id="foro-temaUltimaRespuesta" class="pequeno"><p>17/03/2010, 06:36:03 PM</p></div>
  </div>
 
</div> 

He intentado de varias maneras pero no logro que la "columna" se expanda hacia abajo con el texto.

Agradecería cualquier ayuda, tengo poca experiencia con CSS y me gustaría aprender a resolver este tipo de problemas.

Gracias de antemano