親divが子どもと一緒に成長しない理由

Question

大丈夫ですので、私はラッパーdivとdivのサイドを持つページを持っています。ラッパーは中央に置かれ（マージンオート）、子どもは浮動しているので、ラッパーは子どもと一緒に成長しません。 HTML：

<div id="wrapper"> 
<div id="banner"></div> 
<h1>Resource page</h1> 
<div id="non-vidCon"> 
    <div id="images" class="debug"> 
      <ul id="imgList"> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
      </ul> 
    </div> 
    <div id="docs"> 
      <ul id="docList"> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
       <li>ha</li> 
      </ul> 
    </div> 
</div> 
<div id="vidCon"></div> 

CSS：私は、スタック（このサイト）を介して検索したと修正のいくつかを適用しているが、どれも働いた

#wrapper { 
background-color:#F5F5F5; 
width:1000px; 
height:100%; 
margin: auto; 
margin-top: 20px; 
position: relative; 
} 

#banner { 
background: url('../images/Duke_BackToBack_Header.jpg'); 
width: 1000px; 
height: 111px; 
position: relative; 
top: 0px; 

} 

#non-vidCon { 
width: 1000px; 
height: auto; 
min-height: 300px; 
position: relative; 
border-top: 1px solid #cccccc; 
} 

#images { 
width: 498px; 
height:auto; 
position: relative; 
float: left; 
content: ""; 


} 


#docs { 
width: 498px; 
height:auto; 
position: relative; 

content: ""; 
float: left; 


} 

（インラインブロックを殺した私のマージンオート）助けていただければ幸いです

Answer 1

あなたのフロートをクリアする必要があります。 #wrapperのクローズ前に

、追加：

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

CSS：

.clear { 
    clear:both 
} 

Answer 2

スティックoverflow:autoあなたの＃ラッパーのCSSに、それはそれ内のコンテンツを含むように。あなたは基本的にそこにいただけで、そのリストを包む方法が必要でした。

#wrapper { 
    background-color:#F5F5F5; 
    width:1000px; 
    margin: auto; 
    margin-top: 20px; 
    position: relative; 
    overflow:auto; 
} 

たとえば、jsFiddleを参照してください。ここにはjsFiddle example with your old HTML tooがあります。 #non-vidConのそれぞれの子を浮動することで

Answer 3

、あなたは流れから、そのすべてのコンテンツを削除している、そのためこれがない高さ、目に見える背景とそのコンテンツの長さがないのケア：それはもう流れの一部ではありません。

Diodeusソリューションは最も互換性がありますが、余分なdivが必要です。別の解決策は、要素にhasLayoutを与えるIE6/7に対してのみを追加することです（

#non-vidCon:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

）。

#non-vidCon { zoom: 1; }