親divのフレーム内に浮動divを保持する方法は？

Question

私はdivをいくつか他のdivsを設定して浮動小数点：leftを持っています。今、私はそれらのすべての周りのフレームをしたいので、私は、親のdivにボーダーを置くが、浮動もの枠のうち、「流れ」...

CSS：

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
} 
.column { 
    float:left; 
    padding-left:10pt; 
} 

HTML：

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 
</div> 

（CSSで）親フレーム内に保持するにはどうしたらよいですか？

Answer 1

あなたの親<div>にoverflow: hiddenを追加する - あなたは 'floatをクリアする' 必要がありますhttp://jsfiddle.net/5AVA8/

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
    overflow: hidden; 
} 

Answer 2

、 'フロートクリア' の様々な方法があります。

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 
    <div style="clear:both"></div> 
</div> 

は、最後の行からの第二を参照してください：一部のソリューションではCSSのみ、（それは余分なマークアップを追加するため、一部の人に嫌わ）私の好適な解決策は、次のように動作しますが、「クリアDIV」を追加することです伴います。

Answer 3

あなたはフロートをクリアしていません。コードをこれに変更すると、問題が解決されます。

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
} 
.column { 
    float:left; 
    padding-left:10pt; 
} 

.clear { 
    clear: both; 
} 

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 

    <div class="clear"></div> 
</div> 

私はここで設定した例を参照してください - 明確なプロパティの詳細についてはhttp://jsfiddle.net/spacebeers/RQNDr/

を - http://css.maxdesign.com.au/floatutorial/