Question

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 header 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

Answer 1

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.