Height of parent div is zero even if it has child with finite heights

Question

I have a website whose layout has been shown in the diagram. The body consists of a main container, which comprises of header, parent div

Answer 1

Try adding the following to your stylesheet:

#parentdiv:after { 
    content: " "; 
    display: block;
    clear: both;
} 

As Daedalus suggested in his comment, you're probably floating the child divs. If so, the line above fixes it.

The problem when you float things is that their parent element "ignores" them.

The line above creates and inserts a (pseudo-)element into the #parentdiv which is pushed down past all of the floated divs. Then the parent div, which although ignores the floated children, doesn't ignore this pseudo element - acting as it should, it expands to contain the pseudo element. Now, since the pseudo-element is below all of the floated children, the parent div happens, or better yet, seems to "contain" the floated children as well - which is really what you want.