Question

ok so i have a page with a wrapper div and divs in side. the wrapper is centered(margin auto)and the children are floating left the problem is the wrapper wont grow with its children.
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;


}

i’ve searched through the stack (this site) and have applied some of the fixes, but none worked (inline-block killed my margin auto)any help would be appreciated

Answer 1

You need to clear your floats.

Before the close of #wrapper, add:

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

CSS:

.clear {
   clear:both   
}