¿Cómo conseguir esto?

[Raulmmmm]

Antes de irme a ver la final del Mundial (¡vamos España!) he estado probando a hacer una cosa. Como una imagen vale más que mil palabras, allá va.
Esto es lo que tengo en mi web:

Y esto es lo que me gustaría tener:

Creo que con la imagen queda bastante claro. Lo que quiero conseguir es que el título no empuje a la imagen hacia abajo, sino que se ponga a su lado. El código, de momento, es este:

Código HTML:

<div class="fle">
<h3><a href="proyecto.php?id=292">Hacer una captura de pantalla de una página web completa con Screengrab (Firefox)</a></h3>
<div class="foto">
<a href="proyecto.php?id=292"><img src="i/thumbs/capturarpaginawebcompleta.jpg" alt="Hacer una captura de pantalla de una página web completa con Screengrab (Firefox)" title="Hacer una captura de pantalla de una página web completa con Screengrab (Firefox)" /></a>
</div>
<div class="detalles">
Breve explicación.
<br />
<span class="floja">Hecho por Raulmmmm</span>
</div>
</div>
 

Código CSS:

.fle, .curso { float: left; width: 232px; height: 135px; overflow: hidden; background: #d7e9f3; padding: 2px; margin: 0 3px 3px 0;}
.fle .foto { position: relative; float: left; width: 112px; height: 112px; background: #fff; padding: 2px; border: 1px solid #999;}
.fle .foto img { max-height: 112px; position: absolute; clip:rect(0px,112px,112px,0px);}