How do you keep parents of floated elements from collapsing?

Question

Although elements like <div>s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: If floated elements have non-floated parent elements, the parent will collapse.

For example:

<div>

  <div style="float: left;">Div 1</div>

  <div style="float: left;">Div 2</div>

</div>

The parent div in this example will not expand to contain its floated children - it will appear to have height: 0.

How do you solve this problem?

I would like to create an exhaustive list of solutions here. If you're aware of cross-browser compatibility issues, please point them out.

Solution 1

Float the parent.

<div style="float: left;">

  <div style="float: left;">Div 1</div>

  <div style="float: left;">Div 2</div>

</div>

Pros: Semantic code.

Cons: You may not always want the parent to float. Even if you do, do you float the parents' parents, and so on? Must you float every ancestor element?

Solution 2

Give the parent an explicit height.

<div style="height: 300px;">

  <div style="float: left;">Div 1</div>

  <div style="float: left;">Div 2</div>

</div>

Pros: Semantic code.

Cons: Not flexible - if the content changes or the browser is resized, the layout will break.

Solution 3

Append a "spacer" element inside the parent element, like this:

<div>

  <div style="float: left;">Div 1</div>

  <div style="float: left;">Div 2</div>

  <div class="spacer" style="clear: both;"></div>

</div>

Pros: Straightforward to code.

Cons: Not semantic; the spacer div exists only as a layout hack.

Solution 4

Set parent to overflow: auto.

<div style="overflow: auto;">

  <div style="float: left;">Div 1</div>

  <div style="float: left;">Div 2</div>

</div>

Pros: Doesn't require extra div.

Cons: Seems like a hack - that's not the overflow property's stated purpose.Comments? Other suggestions?

Answer 1

Following solutions will help you to keep parents of floated elements from collapsing:

Solution 1: This is the most reliable and unobtrusive method to use:

For demo refer to this link: http://jsfiddle.net/SO_AMK/wXaEH/

In HTML:

<div class="clearfix">

    <div style="float: left;">Div 1</div>

    <div style="float: left;">Div 2</div>

</div>​

In CSS:

.clearfix::after { 

   content: " ";

   display: block; 

   height: 0; 

   clear: both;

}

In the above code, you don't have to add the class to the parent DIV with the CSS targeting.

Note: Solution 1 is backward compatible with IE8, therefore, you don't have to worry about older browsers failing.

Solution 2: An adaptation on 1st solution has been suggested and is as follows:

For demo refer to this link: http://jsfiddle.net/wXaEH/162/

In HTML:

<div class="clearfix">

    <div style="float: left;">Div 1</div>

    <div style="float: left;">Div 2</div>

</div>​

In CSS:

.clearfix::after { 

   content: " ";

   display: block; 

   height: 0; 

   clear: both;

   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );

}

.ie7-clear {

    display: block;

    clear: both;

}

The above solution appears to be backward compatible to IE5.5 but will be untested.

Solution 3: It's possible to set display: inline-block; and width: 100%; to emulate a normal block element while not collapsing.

For demo refer to http://jsfiddle.net/SO_AMK/ae5ey/

In CSS:

.clearfix {

    display: inline-block;

    width: 100%;

}

This above solution can be backward compatible with IE5.5 but has only been tested in IE6.