css - テキストが縮小ラップされた div を展開しないようにする

Question

他のいくつかのdivにシュリンクラップされたホルダーdivがあるため、ホルダーには幅が設定されていません。また、ホルダー内には、テキストを含む別の div があります。テキストが多すぎると、ホルダーが拡張されるため、シュリンクラップされなくなります。これが私の問題のデモですhttp://jsfiddle.net/WSbAt/。写真ギャラリー用のページです。

行ごとの画像の数が動的であるため、ホルダーの幅を設定しないと方法がないのではないかと考えています。おそらくjQueryで理解できますが、cssソリューションがあることを望んでいました。

編集:行ごとのサムネイルの数はウィンドウのサイズに基づいているため、幅を指定しないようにしています。

デモ: http://jsfiddle.net/WSbAt/

CSS:

#container
{
    width:600px; /*only set for demo. will be random on live page*/
    border:1px solid black;
    text-align:center;
}
#holder
{
    display: inline-block;
    border:2px solid blue;
}
.thumbnail
{
    float:left;
    width:100px;
    height:100px;
    background-color:red;
    margin-right:10px;
    margin-bottom:10px;
}
.expandedHolder
{
    padding:10px;
    border:2px solid yellow;
    margin-bottom:10px;
    margin-right:10px;
}
.fullImage
{
    float:left;
    width:250px;/*only set for demo. will be random on live page*/
    height:200px;
    background-color:green;
}
.text
{
    float:left;
    margin-left:10px;
}

HTML:

<div id="container">
    <div id="holder">
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div style="clear:both;"></div>
        <div class="expandedHolder">
            <div class="fullImage"></div>
            <div class="text">some text here. some text here. some text here. </div>
            <div style="clear:both;"></div>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>