Posicionamiento flotante

[C2am]

Bueno, con un poco de html5 y css:
http://jsfiddle.net/c2am/dFDwq/59/embedded/result/

Seguro se puede mejorar más:

Código HTML:

<div id="contenedor">
    <figure>
        <img src="foto.jpg" width="150" height="150"/>
        <figcaption>
            <strong>País:</strong>
        Chile
            <br/>
            <strong>Inicio Actividad</strong>
        1990
        </figcaption>
    </figure>
    <div id="descripcion">
                <p>Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info,Acá va todo el texto, es bastante largo, pongo poca info ,Acá va todo el texto, es bastante largo, pongo poca info ,Acá va todo el texto, es bastante largo, pongo poca info ,Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info, Acá va todo el texto, es bastante largo, pongo poca info</p>
      
    </div>    
</div>
 

Código CSS:

#contenedor{
    width:950px;
transition: width 10s;
-webkit-transition: width 10s; /* Safari */
}
#contenedor:hover{
    width:170px;
    
}
figure {
    width: 170px;
    float: right;
    background: #FFF;
    margin: 0 0 10px 10px;
     text-align:center;
}
figure img{
    width: 150px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   
}
figcaption {
    background:#DDD;
    padding: 5px;
    width: 150px;
     margin:0 auto;
}
#descripcion {
    background:#EEE;
    text-align: justify;
    padding-left: 16px;
    padding-right: 16px;
}