[Ovillo] Lista de definición para una ficha

[Gael]

Hola!

Me encuentro delante de un problema con una lista de definición. Tengo 
que escribir el XHTML y el CSS de una lista vertical de fichas de 
personas, plantas, animales o futbolistas (lo que más rabia os dé). Así 
que tengo una ul y, en cada li, una dl. Hasta aquí bien.

Las fichas constan del nombre, una foto y una descripción. El término 
"Nombre:" con el correspondiente nombre de la persona, planta o animal, 
ocupa todo el ancho de la lista. Debajo sólo aparecen la foto (sin el 
término "Fotografía:") a la izquierda en un bloque y la descripción 
(tampoco tiene el término "Descripción:") a su derecha.

Para que os hagáis una idea, he colgado un esquema aquí: 
http://img528.imageshack.us/img528/5343/esquemafd2.jpg

El marcado que encuentro más conveniente es el siguiente:

<ul>
  <li>
    <dl>
      <dt>Nombre:</dt><dd>Perico de los Palotes</dd>
      <dt>Fotografía:</dt><dd><img src="..." ... /></dd>
      <dt>Descripción:</dt><dd>Lorem ipsum bla bla bla...</dd>
    </dl>
  </li>
  <li>
    [...]
  </li>
</ul>

Ahora, ya no sé cuántas horas llevo con la hoja de estilos. He intentado 
dividir la lista por las guías rojas de la imagen anterior. Lo más 
parecido que he encontrado es lo siguiente:

- float: left; en todos los dt para que el dd quede a su derecha.
- una clase para los dt de la segunda línea con display: none; y que 
sólo se vea la foto y la descripción.
- float: left para el dd de la foto, para que la descripción quede a su 
derecha.

Pero si la descripción es más alta que la foto, el texto que sale por 
debajo se va hacia la izquierda (el dd de la foto no ocupa todo el 
alto). Esto es lo que mejor que he conseguido (por si queréis copiar y 
pegar):

XHTML:

<ul>
  <li>
    <dl>
      <dt>Nombre:</dt><dd>Perico de los Palotes</dd>
      <dt class="oculto">Fotografía:</dt><dd class="flotada"><img 
src="..." ... /></dd>
      <dt class="oculto">Descripción:</dt><dd>Lorem ipsum bla bla 
bla...</dd>
    </dl>
  </li>
</ul>


CSS:

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

dl {
  margin: 0;
  padding: 0;
}

dt {
  float: left;
  margin: 0 7px 0 0;
  padding: 0;
  font-weight: bold;
}

dt.oculto {
  display: none;
}

dd {
  margin:0;
  padding:0;
}

dd.flotada {
  float: left;
  margin-right: 50px; /* para que quepa la foto */
}


Alguien puede echarme una mano, por favor? O a alguien se le ocurre una 
manera mejor de hacerlo? Me cuesta creer que sea tan complicado.

Muchas gracias y un saludo!


Gael