Blog: Web Design
Close up of tape measure

HTML: Give Parent Div 100% Height Of Child Floated Elements

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Many front end developers have been stumped by this dilemma before.

When you have a parent div with only floated child elements inside, how do you give the parent element the height of the floated child elements?

Before we look at the answer, let’s look at why this is a problem in the first place.

Understanding Floats

When we float elements with CSS, what we’re doing is taking those elements out of the normal flow of the page.

A floated HTML element will bump all the way to the right or left edge of it’s containing element (depending on what direction you float it) — or to the edge of another floated element.

The problem this creates with a parent HTML element that only contains floated children elements is the resulting height is no longer auto, but instead renders as height: 0.

Practical Applications

Imagine your parent element has a different background color than the preceding or subsequent sections. Or, imagine that you are trying to create white space by using margin or padding, but you’re not seeing the results you want, because the parent element has an effective height of zero.

How do we solve this?

There are a couple of methods that work. Let’s look at some HTML and CSS that may look similar to yours, and work from there.

Where We’re Starting From

Here’s some boilerplate HTML and CSS. In our example, we have a parent element with two floated child elements.


<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
    <div class="floating-div">
        <ul>
            <li>List Item One</li>
            <li>List Item Two</li>
            <li>List Item Three</li>
            <li>List Item Four</li>
        </ul>
    </div>
    <div class="floating-div">
        <ul>
            <li>List Item Five</li>
            <li>List Item Six</li>
            <li>List Item Seven</li>
            <li>List Item Eight</li>
        </ul>
    </div>
</div>


/* The CSS you're starting with may look similar to this.
 * This doesn't solve our problem yet, but we'll get there shortly.
 */
.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}
.floating-div {
  float: left;
  width: 50%;
}
.floating-div ul {
  display: inline-block;
  height: auto;
}

In our current example, the background color of the parent element doesn’t cover the full height like it should because the child elements are floated.

Solution #1: overflow: auto

A solution that works in all modern browsers and in Internet Explorer back to IE8 is to add overflow: auto to the parent element. This also works in IE7, with scrollbars added.


/* Our Modified CSS.
 * This is one way we can solve our problem.
 */
.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
  overflow: auto; /*This is what we added!*/
}
.floating-div {
  float: left;
  width: 50%;
}
.floating-div ul {
  display: inline-block;
  height: auto;
}

Solution #2: Float Parent Container

Another solution that works in all modern browsers and back to IE7 is to float the parent container.

This may not always be practical, because floating your parent div may affect other parts of your page layout.


/* Modified CSS #2.
 * Floating parent div.
 */
.containing-div {
  background-color: #d2b48c;
  display: block;
  float: left; /*Added*/
  height: auto;
  width: 100%; /*Added*/
}
.floating-div {
  float: left;
  width: 50%;
}
.floating-div ul {
  display: inline-block;
  height: auto;
}

Method #3: Add Clearing Div Below Floated Elements


<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
    <div class="floating-div">
        <ul>
            <li>List Item One</li>
            <li>List Item Two</li>
            <li>List Item Three</li>
            <li>List Item Four</li>
        </ul>
    </div>
    <div class="floating-div">
        <ul>
            <li>List Item Five</li>
            <li>List Item Six</li>
            <li>List Item Seven</li>
            <li>List Item Eight</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>


/* 
 * CSS to Solution #3.
 */
.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}
.floating-div {
  float: left;
  width: 50%;
}
.floating-div ul {
  display: inline-block;
  height: auto;
}
/*Added*/
.clear {
  clear: both;
}

This works in old browsers as well as new. Some developers may prefer not to use this method, because it is not semantic, but it works.

Method #4: Add Clearing Div To The Parent Element


<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
    <div class="floating-div">
        <ul>
            <li>List Item One</li>
            <li>List Item Two</li>
            <li>List Item Three</li>
            <li>List Item Four</li>
        </ul>
    </div>
    <div class="floating-div">
        <ul>
            <li>List Item Five</li>
            <li>List Item Six</li>
            <li>List Item Seven</li>
            <li>List Item Eight</li>
        </ul>
    </div>
</div>


/* 
 * CSS to Solution #4.
 */
.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}
.floating-div {
  float: left;
  width: 50%;
}
.floating-div ul {
  display: inline-block;
  height: auto;
}
/*Added*/
.clearfix {
  clear: both;
}
.clearfix:after {
  clear: both; 
  content: "";
  display: table; 
}

This solution is pretty bulletproof for older browsers and newer browsers alike.

Conclusion

No matter what solution you use to give parent elements the full height of the floated elements, test it for your particular page layout.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

7 comments on “HTML: Give Parent Div 100% Height Of Child Floated Elements

  1. Awesome post, John. Well tackled.
    I tend to use Method#2 where possible, although I think Method#4 would be the most robust for browser support (and semantics). Great series of posts, by the way!

  2. CJ! Haven’t seen you around in a while. How have you been?

    I actually use overflow: auto where I can, but adding a clearfix div to the bottom of the parent div, or self-clearing the parent seems to be more bulletproof than floating the parent element or the overflow technique for backwards compatibility.

  3. Hey nice article. I’m going to use this for work, I however I am not clear how #4 works. I tried it and it worked but I’m just curious.

    Can you expand on that?

    Thanks,
    Imran

    1. Hi Imran:

      I get the sense that solution #4 works in a similar way to #3, by creating an element (in this case a pseudo-element) with clearfix CSS attached. This forces the parent element to take on the height of the child elements.

Join the Conversation

Your email address will be kept private. Required fields marked *.