почему родительский div не растет вместе со своими дочерними элементами

хорошо, у меня есть страница с оберткой 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;


}

Я просмотрел стек (этот сайт) и применил некоторые исправления, но ни один из них не сработал (встроенный блок убил мою маржу автоматически), любая помощь будет принята с благодарностью