親フローティング要素はパーセント幅の子でサイズ変更されません

Question

width: 30%を使用する子を含むフローティング親divがあります。

この親divは、幅単位としてパーセントを使用する場合はサイズ変更されませんが、pxまたはemsを使用するとうまく動作します。

width: 30%を使用しているときに親divがその幅を調整できるようにする方法はありますか？流体レイアウトが必要ですか？

詳細については、この例を見てください： http://jsfiddle.net/sBzYH/

<div class='percent container'> 
    <div> 
     <h3>width: 30%</h3> 
     <p> 
      When using the child div 
      with percent width, the floating 
      parent div keeps expading 100%. 
     </p> 
    </div> 
</div> 

<div class='pixel container'> 
    <div> 
     <h3>width: 100px</h3> 
     <p> 
      When using the child div 
      with pixel width, the floating 
      parent div resizes accordingly. 
     </p> 
    </div> 
</div> 

Answer 1

、それは完全な利用できる幅がデフォルトになりますが、あなたが明示的にすることができdivだから親コンテナはすでに、流体の幅になりますそれを制限する。 This CSSはあなたの二つの例とほぼ同じサイズを行います：

.container { 
    width: 66%; 
    min-width: 325px; 
} 

コンテナのために利用可能以上（弱）500pxなどがあれば、それは利用可能なスペースの66％を取るために展開されますが、それは広いままになります子要素の幅の30％幅は常に100px以上です。