Parent div takes height of first child element and not the sum of all children's height

Question

The parent div "block" has a position: relative. Instead of expanding automatically to assume a height of the total of its children's heights, it takes up the height of the first child only. Can you please explain why is that happening and how to counter it?

    .grid {
      position: relative;
      z-index: 1;
      float: left;
      margin: 3px;
    }
    .grid a {
      text-decoration: none;
    }
    .grid .p7 {
      width: 240px;
      height: 300px;
      border: 1px solid crimson;
    }
    .blocks {
      position: relative;
    }
    .blocks .heading a {
      text-decoration: none;
    }
    .blocks .heading a h3 {
      text-transform: uppercase;
      font-size: 28px;
      font-family: "Rokkitt";
      font-weight: 700;
      padding: 0 3px;
      line-height: 26px;
      color: #222;
      text-align: center;
    }
    .blocks .heading a p {
      font-size: 16px;
      font-family: "Rokkitt";
      font-weight: 400;
      padding: 5px 3px 10px;
      color: #333;
      text-align: center;
    }

<div class="blocks">
  <div class="heading">
    <a href="">
      <h3>Featured Deals</h3>
      <p>Hand selected by our creative director</p>
    </a>
  </div>
  <div class="grid">
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
  </div>
</div>

score 1 · Answer 1 · edited May 23 '17 at 12:28

You need to clear the float on the .grid div otherwise the height of that div will not be counted for margin purposes.

One method is to use overflow:hidden but there are others as detailed HERE

.grid {
  position: relative;
  z-index: 1;
  float: left;
  margin: 3px;
}
.grid a {
  text-decoration: none;
}
.grid .p7 {
  width: 240px;
  height: 300px;
  border: 1px solid crimson;
}
.blocks {
  position: relative;
  background: #bada55;
  overflow: hidden;
  /* here */
}
.blocks .heading a {
  text-decoration: none;
}
.blocks .heading a h3 {
  text-transform: uppercase;
  font-size: 28px;
  font-family: "Rokkitt";
  font-weight: 700;
  padding: 0 3px;
  line-height: 26px;
  color: #222;
  text-align: center;
}
.blocks .heading a p {
  font-size: 16px;
  font-family: "Rokkitt";
  font-weight: 400;
  padding: 5px 3px 10px;
  color: #333;
  text-align: center;
}

<div class="blocks">
  <div class="heading">
    <a href="">
      <h3>Featured Deals</h3>
      <p>Hand selected by our creative director</p>
    </a>
  </div>
  <div class="grid">
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
  </div>
</div>

Thank you, it works fine now. Could you explain how overflow:hidden clears the float. I was not aware that it could do so. Cheers! — SpiderWasp42, Dec 22 '14 at 15:48
This link might be useful - [**What's the Best Clearfix method**](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) — Paulie_D, Dec 22 '14 at 16:35

score 0 · Accepted Answer · answered Dec 22 '14 at 14:26

The reason for the background not filling the area is due to your floated div not being cleared. This addition to your css should resolve the issue for you.

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

score 0 · Answer 3 · answered Dec 22 '14 at 14:27

0

The div.grid has float:left.

You can clear the float of that div, or you can float the div.blocks, like:

.blocks{
    float: left;
    width: 100%;
}

JSFiddle: http://jsfiddle.net/hqzctkfv/

answered Dec 22 '14 at 14:27

Everton Lenger

1,446
2
17
32

score 0 · Answer 4 · answered Dec 22 '14 at 14:31

I added a small div (empty) with a property of clear:both after the grid div

Your problem was the float not being cleared properly. I personally have a class called clearfix in my main css file in all my projects.. comes in handy quite many times.

code snippet...

.grid {
  position: relative;
  z-index: 1;
  float: left;
  margin: 3px;
  background: #cecece;
}
.grid a {
  text-decoration: none;
}
.grid .p7 {
  width: 240px;
  height: 300px;
  border: 1px solid crimson;
  background: green;
}
.blocks {
  position: relative;
  background: #123ad2;
}
/* this class here is added....comes quite handy in projects where you are working with floats a lot */
.clearfix {
  clear: both;
}
.blocks .heading a {
  text-decoration: none;
}
.blocks .heading a h3 {
  text-transform: uppercase;
  font-size: 28px;
  font-family: "Rokkitt";
  font-weight: 700;
  padding: 0 3px;
  line-height: 26px;
  color: #222;
  text-align: center;
}
.blocks .heading a p {
  font-size: 16px;
  font-family: "Rokkitt";
  font-weight: 400;
  padding: 5px 3px 10px;
  color: #333;
  text-align: center;
}

<div class="blocks">
  <div class="heading">
    <a href="">
      <h3>Featured Deals</h3>
      <p>Hand selected by our creative director</p>
    </a>
  </div>
  <div class="grid">
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
    <a href="details.html">
      <div class="grid p7"></div>
    </a>
  </div>
  <div class="clearfix"></div>
</div>

Just one clarification - do I have to put the clearfix div after every div that uses a float property? And could you link me something that explains why this glitch occurs: I'd like to know the theory behind. Cheers — SpiderWasp42, Dec 22 '14 at 15:46

Parent div takes height of first child element and not the sum of all children's height

4 Answers4