How to make a div grow in height while having floats inside

Alternate scenarios

Though overflow: hidden; works efficiently for multitudes of cases, it doesn't adapt perfectly to all. Lets explore other methods for dynamic content such as the often hailed clearfix method and display: table;.

Clearfix technique: Alternate universe

To cater for all around fluidity, :after pseudo-element comes to the rescue, in conjunction with clear: both;'.

.clearfix:after {
  content: "";
  display: table; // pulling off a table flip. Literally!
  clear: both;    // It's my turn, and I want a clean slate
}


Class addition to the div:

<div class="clearfix">
    <div style="float: left;">Siding with the left like a boss!</div>
    <div style="float: right;">Hanging on the right like it's the right thing to do</div>
</div>


Sustainable with display table

The display: table; technique makes the containing div grow comfortably to contain floats, all the while bypassing overflow issues.

<div style="display: table;">
    <div style="float: left;">...</div>
    <!-- More floating soldiers here -->
</div>


Aesthetics in effect

Visual aspects are as significant as functionality when dealing with floats, to create usability and boost reader attractiveness.

Color and space: Eye candy

Grab eyeballs by judiciously employing a background color coupled with strategic padding, to add breathing space for your content, thereby enhancing the user interface.

Padding and margins: The comfort zones

Comb through padding and margin values to achieve the most comforting spacing and alignment. Spaces aren't just voids, they're the key to eye-satisfying design layouts.

Tidbits 'n' tricks

The hoops of cross-browser compatibility

And how do we not mention the dreaded cross-browser compatibility?! Let's see how veterans tackle this one.

The legacy trick bag: The Zoom fix

To accommodate elderly IE versions, combining display: block; with zoom: 1; within :after clearfix comes handy:

.clearfix:after {
  content: "";
  display: block;  // block-n-roll!
  clear: both;     // out with the old, in with the new
  zoom: 1;         // let's go up close and personal
}


Testing for robustness

This can't be stressed enough: cross-browser and cross-content length testing is your bulletproof vest against misbehaving layouts.

Embracing responsiveness

Our tech-obsessed world is all about multi-platform usability. Responsive design is the king here, and ensures you are serving all screens just right.