Parent Height is Not Growing When Childern Are Floating Left

Question

Can you please take a look at this demo and let me know why the height of parent div .colors is not growing while the children .color are floating to left (as required)?

 .colors{
     min-height: 20px;
     padding: 19px;
     margin-bottom: 20px;
     background-color: #f5f5f5;
     border: 1px solid #e3e3e3;
     border-radius: 4px;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     height: auto;
}
 .color{
     height:100px;
     width:100px;
     float: left;
     text-align: center;
     border: 2px solid #eee;
     background:khaki;
}

<div class="colors">
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
 </div>

score 1 · Accepted Answer · answered Jan 14 '18 at 01:33

Add overflow: auto to the parent.

.colors{
     min-height: 20px;
     padding: 19px;
     margin-bottom: 20px;
     background-color: #f5f5f5;
     border: 1px solid #e3e3e3;
     border-radius: 4px;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     height: auto;
     overflow: auto;
}
 .color{
     height:100px;
     width:100px;
     float: left;
     text-align: center;
     border: 2px solid #eee;
     background:khaki;
}

<div class="colors">
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
 </div>

score 0 · Answer 2 · answered Jan 14 '18 at 01:36

The behaviour you are observing is a result of the nested floated elements collapsing the containing parent element, as a result of them being taken out of the normal document flow.

To rectify this, consider declaring an overflow property with the value of auto on .colors.

.colors{
     min-height: 20px;
     padding: 19px;
     margin-bottom: 20px;
     background-color: #f5f5f5;
     border: 1px solid #e3e3e3;
     border-radius: 4px;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     height: auto;
     /* adddtional */
     overflow: auto;
}

Code Snippet Demonstration:

.colors{
     min-height: 20px;
     padding: 19px;
     margin-bottom: 20px;
     background-color: #f5f5f5;
     border: 1px solid #e3e3e3;
     border-radius: 4px;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     height: auto;
     /* adddtional */
     overflow: auto;
}
 .color{
     height:100px;
     width:100px;
     float: left;
     text-align: center;
     border: 2px solid #eee;
     background:khaki;
}

<div class="colors">
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
 </div>

Alternatively, a helper pseudo-element could be declared to clear the float, e.g:

.colors:after {
    content: "";
    display: block;
    clear: both;
}

Code Snippet Demonstration:

.colors{
     min-height: 20px;
     padding: 19px;
     margin-bottom: 20px;
     background-color: #f5f5f5;
     border: 1px solid #e3e3e3;
     border-radius: 4px;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     height: auto;
}
 .color{
     height:100px;
     width:100px;
     float: left;
     text-align: center;
     border: 2px solid #eee;
     background:khaki;
}

/* Additional */

.colors:after {
    content: "";
    display: block;
    clear: both;
}

<div class="colors">
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
 </div>

Parent Height is Not Growing When Childern Are Floating Left

2 Answers2