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 and footer. The parent div further contains several child div as shown.

The problem being height of all the child div is finite. But the parent div contains nothing other than the child divs. All the child divs are visible but the height of the parent div is shown to be zero. I am also not fixing the height of the parent div by giving some pre-specified value as it may cause blunder if number of child increases in future.

The problem due to zero size of parent div is that my footer div is going up and clashing with the contents of the parent div. This can be resolved by giving a suitable margin-top, but that is not a solution I am looking for.

Can anyone suggest me some way so that the height of the parent div changes automatically according to the height of child divs present.

Please comment if I am unclear in asking my doubt !

Tootle

Please give us your current css. Also, am I guessing correctly that your child divs use float: etc? – Hallelujah

Add overflow: hidden; to parent. – Nifty

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%;
}

Drobman

Add the "clearfix" class to the parent element, not the child. – Declaratory

Answer 2

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.

Mclane

After combining with other answers, you answer and explanation makes very clear sense – Closehauled

This should be the correct answer. Much more clear and concise. – Masturbation

Answer 3

@João-Paulo-Macedo 's work, as implemented in a styled div:

export const HeadroomWrapper = styled('div')`
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 2;
    &:after { 
        content: " ";
        display: block;
        clear: both;
        height: 1px;
    }
`;

Salience