Div height remains zero when including images

Question

I have the following code that displays 5 images horizontally across the screen, but for some reason I can not get the Div "block-before-description" to have a height, in FireBug the height is 0 but the 20px margin does show. I have tried many things including floating, display:block, position absolute/relative, and looked at previous questions to no avail. If I remove the images leaving only the heading then the block shows height to cover the headings.

<style type ="text/css">
    .container {
      margin-right: auto;
      margin-left: auto;
      padding-left: 15px;
      padding-right: 15px; }

    .col-md-2 {
        float: left;
        width: 16.66667%;
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        }

    .feat-icons {
      text-align: center;
    }

    .block-before-description {
      margin-bottom: 20px;
      padding: 0px;
    }
</style>

</head>

<body>
<div class="container">
    <div class="block-before-description">
        <div class="col-md-2 feat-icons">
            <img src="icons/30-Days-Support.jpg" width="105" height="105" alt=""/>
            <h4>Support</h4> 
        </div>
        <div class="col-md-2 feat-icons">
            <img src="icons/Design-Icon.jpg" width="105" height="105" alt=""/>
            <h4>Premium Design</h4> 
        </div>
         <div class="col-md-2 feat-icons">
            <img src="icons/Features.jpg" width="105" height="105" alt=""/>
            <h4>Features</h4> 
        </div>    
         <div class="col-md-2 feat-icons">
            <img src="icons/Guide-Icon.jpg" width="105" height="105" alt=""/>
            <h4>Gudie Included</h4> 
        </div>     
         <div class="col-md-2 feat-icons">
            <img src="icons/Mobile-Icon.jpg" width="105" height="105" alt=""/>
            <h4>Mobile Supported</h4> 
        </div>
    </div>

</div>

</body>
</html>

Any help on the issue would be appreciated.

I think you are using Bootstrap. In bootstrap every `col-*` class is floated, that's why your wrapper has 0px height — Justinas, Sep 10 '14 at 12:33
This is because float elements `.col-md-2` are removed from normal flow. Hence the container `.block-before-description` has no idea about how high they are. If you use Twitter Bootstrap grid system, it would handle it itself, if not, you have to clear the float. — Hashem Qolami, Sep 10 '14 at 12:33
@machineaddict: Don't you need to have the `clearfix` in an empty `div` after the floats? See http://getbootstrap.com/css/#grid-responsive-resets — Aaron Digulla, Sep 10 '14 at 12:41
There are couple of ways to fix that, which have been discussed many times on SO for instance: http://stackoverflow.com/questions/12871710/why-clear-both-css — Hashem Qolami, Sep 10 '14 at 12:41

misterManSam · Accepted Answer · 2014-09-10T12:41:18.127

This is the classic issue caused by all the containers children floating. The height of the parent is not calculated as the children are removed from the normal flow of the document.

The following examples do not take into account Bootstraps ready made solutions as you have not mentioned bootstrap in your question.

One option is to simply apply the overflow property to the parent:

Example with overflow and floats.

.block-before-description {
  margin-bottom: 20px;
  padding: 0px;
  background: #F00;
  overflow: hidden;
}

Another option is to not use a float at all and use display: inline-block to display your images on the one horizontal line.

Example with inline-block

 .col-md-2 {
    display: inline-block;
    vertical-align: top; /* use middle, top or bottom to keep an even alignment */
    width: 16.66667%;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
 }

Div height remains zero when including images

1 Answers1