Parent Height doesn’t follow their float children [duplicate]

by

Add overflow:hidden; to the container:

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden; /* <--- here */
}

Because its content is floated, the container div collapses. Using a ‘clearfix’ class or, as I mentioned, adding overflow:hidden will cause the container to contain the floated elements.

UPDATE Explanation of why this works can be found here: https://stackoverflow.com/a/9193270/1588648

… and here:

In order for them (browsers) to calculate what overflowed the bounds of the block (and thus should be hidden), they needed to know the size of the block. Because these blocks do no have an explicit height set, the browsers used the calculated height of the content instead.

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Leave a Comment