Question

I have a div inside another div and I wonder why the inner div’s height isn’t the same as its parent? I set the height of the parent div to 40px, but the child div does not seem to stretch to this height. Am I wrong about the height of divs?

Making it simple

<div id="first" style="height:40px"><div id="second"></div></div>

Answer 1

A div will only be as tall as the content within it (see this example). To extend a child div to the height of its parent, add height: 100% to the child.

HTML:

<div id="first">
    <div id="second"></div>
</div>

CSS:

#first {
    height: 40px;
}

#second {
    height: 100%;;
}

JS Fiddle Example