Почему не родительский родитель с его детьми

Question

ok, поэтому у меня есть страница с оберткой div и divs в боковом направлении. обертка центрирована (margin auto), а дети плавают влево, проблема заключается в том, что обертка не будет расти вместе со своими дочерними элементами. 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.

Answer 3

Плавая каждый ребенок #non-vidCon, вы удаляете все содержимое из потока, поэтому для него нет высоты, нет видимого фона и не заботитесь о длине его содержимого: он больше не является частью потока.

Решение Diodeus является наиболее совместимым, но нуждается в дополнительном div. Другим решением является добавление

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

и только для IE6/7, дающего hasLayout элементу.

#non-vidCon { zoom: 1; }