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

Seems like you got a case for the clearfix class.

So I'm guessing you're floating the child div and that's why the parent div's height is 0. When you use floats, the parent doesn't adapt to the height of the children.

You can apply the 'clearfix' classes to the parent of the floating elements (of course you need to have it in your stylesheet) and it will add an insivible '.' at the end. Your parent will then have the correct height.

Note, it's cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}