CODEWITHSUNDEEP
htmlcss
zero
zero

Reputation: 3084

why wont the parent div grow with its children

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

Upvotes: 0

Views: 392

Answers (3)

FelipeAls
FelipeAls

Reputation: 22171

By floating each child of #non-vidCon, you're removing all its content from the flow, thus no height for it, no visible background and no care for the length of its content: it's not part of the flow anymore.

Diodeus solution is the most compatible one but needs an extra div. Another solution is adding

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

and only for IE6/7 giving the hasLayout to the element.

   #non-vidCon { zoom: 1; }

Upvotes: 1

scottheckel
scottheckel

Reputation: 9244

Stick overflow:auto on your #wrapper's css, so that it contains the content within it. You were basically there, just needed a way to wrap that list.

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

See this jsFiddle for an example. Here's a jsFiddle example with your old HTML too.

Upvotes: 3

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You need to clear your floats.

Before the close of #wrapper, add:

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

CSS:

.clear {
   clear:both   
}

Upvotes: 2

Related Questions