Question

How to make parent’s div height auto increment depending on its children’ maximum height?

<div class="parent-div">
   <div class="upper">
      <span></span>
      <span></span>
   </div>
   <div class="lower"></div>
</div>

In this example, I have several span tag inside upper div tag, and I want the height of upper increases depending on the sum height of its children.

Answer 1

Let me guess: you floated the children as columns, and now you’re asking the age-old “how do i clearfix?!?” question.

If that’s the case:

.upper
{
  float: left;
  width: {some value here};
}

.lower
{
  clear: both;
}

Of course, I’m not a mind-reader, so more details would be helpful.