html - Div はサイズ変更された画像をシュリンクラップしません

Question

ページに div があり、その中にいくつかの小さな div があり、テキスト行、画像、および別のテキスト行がすべて中央に配置されています。
しかし、何らかの奇妙な理由で、div はフローティングされていてもテキストをラップしません。現在の小さなイメージをラップするのではなく、フルスケールのイメージと同じ幅を持っているように見えます。

<div id="real">
<div class="relspn">
Title:<br/>
<img src="img.png"/><br/>
Another text
</div>
<div class="relspn">
Title:<br/>
<img src="img.png"/><img src="img.png"/><br/>
Another Text Another Text
</div>
</div>

そのようなものですが、divをフロートするか、インラインブロックとして設定するか、インラインに設定するかは問題ではありません.divは画像全体よりも小さくなりません。

CSSは次のとおりです。

#real {
    float: right;
    position:relative;
    width:96%;
    padding:20px 0;
}

.relspn {
    position:relative;
    text-align:center;
    float:left;
    padding:0.2%;
}

.relspn img {
    position:relative;
    display:inline;
    width:10%;
}

何が起こっているのかわからない、助けて。

編集:
http://jsfiddle.net/3SkZV/1/
今更新しました。例で div クラスを間違って書きました。>.>
フィドルも更新