Give parent div 100% height for floated inner elements

Make outer 100% Height

When we apply the float to inner elements and the outer div is not taking the height. Then you can use below snippets.

<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>

1)Provide overflow : auto to outer div to make outer height 100%.
.containing-div {
  overflow: auto;
}

2)Provide float to outer div.
.containing-div {
  float: left;
  width: 100%;
 }

3)Add a clearing div belown the floated element.
<div class="clear"></div>

4)Add clearing div to parent div.
.clearfix:after {
    clear: both;
    content: "";
    display: table;
}
.clearfix {
  clear: both;
}