Do divs expand vertically to fit their children divs?

I'm having trouble getting my divs to vertically expand with their children divs.

I have something like this:

<div class='headerWrapper'>
    <div class='header'>
        <img..... height=100>
    </div>
</div>

In firebug, the hea开发者_如何学Cder div has a height of 100, the headerWrapper div has a height of 0.

The image is visible in the div beneath it.... There is no fixed height on the headerWrapper div.

So confused.

Thanks- Jonathan

Check and see if you have the header div set to float.

When a child element floats and its parent does not, this causes the parent element to "collapse" to a height of 0.

This page seems to have a pretty good description of the problem about halfway down the page.

If you floats them, you can use a lil css trick to make em high :)

solution 1: auto overflow the parents

<style type="text/css">
    .headerWrapper {overflow: auto;}
    .header {overflow: auto;}
</stlye>
<div class='headerWrapper'>
    <div class='header'>
        <img..... height=100>
    </div>
</div>

solution 2: use clearfix after em

<style type="text/css">
    .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
</stlye>
<div class='headerWrapper clearfix'>
    <div class='header clearfix'>
        <img..... height=100>
    </div>
</div>