Clearing space beneath floated elements

When an element is floated, its parent no longer contains it because the float is removed from the flow. To learn why this happens, read [Containing Floats by Eric Meyer] (highly recommended). Then, once you understand what is happening, use one of the methods below to "fix" it.

Preamble

Option 1 or Option 2 are the best solutions because they do not add extra, unsemantic elements to the markup. Option 1 has the advantage of not relying on IE rendering bugs or CssHacks, but it can fail in complex layouts, especially in Mac-IE, older Geckos, and Opera 7.

Without getting into a HolyWar, it should be noted that options 3 - 7 are squarely in the presentation camp of the PresentationVsContent debate; that is, they all add HTML code that adds no semantic value to the HTML document.

A javascript solution to clearing absolutely positioned elements can be found at http://www.shauninman.com/mentary/past/absolutely_positive.php

Also remember that a float always contains children float, so often the simplest solution is just to float the container!

Option 1

Remind the containing block to wrap its children using the overflow property. Example code where #inner is floated:

<div id="outer">
 <div id="inner">
  <p>big floating contents</p>
 </div>
 <p>Main Content</p>
</div>

Set the outer's style to:

#outer { 

overflow: auto; 
height: 1%;

}

Per section 10.6.7 of CSS2.1 (http://www.w3.org/TR/CSS21/visudet.html#root-height), this causes the #outer div to expand its height to "contain" the floated elements within it. Some browsers will require #outer to have an explicitly set width or height for this to work -- so far, InternetExplorer and Opera 7 seem to require this. Some people have reported that overflow: hidden works more reliably than auto. NetscapeFour and Opera 6 do not support this technique at all.

Originally from http://www.sitepoint.com/blog-post-view?id=238086

Be warned this causes the whatever holds the overflow to become "tabable" (focus will stop on it) in Gecko. You may also see scrollbars appearing if text doesn't fit (e.g. if font sizes are ramped up) or when printing the page.

Option 2

http://www.positioniseverything.net/easyclearing.html

http://www.csscreator.com/attributes/containedfloat.php

In the CSS:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE5/Mac \*/
* html .clearfix {height: 1px;}
.clearfix {display: block;}
/* End hide from IE5/Mac */

XHTML:

<div class="clearfix">
  <div class="floater">
    This text won't extend past the bottom of the "clearfix" div.
  </div>
</div>

No non-semantic XHTML. Just some clever CSS rules.

Once upon a time this method required a touch of JavaScript to bring Mac IE5 into line but no longer.

Option 3

<div class="spacer"> </div>

div.spacer { clear: both; }
This should work, and as DIV has no intrinsic height you can style it to have as much or as little vertical space as you like. But, IE5 and IE6 have several nasty bugs that can appear when a DIV is used to clear floats. They appear only if various conditions are met, so they may or may not occur on your page. Also, Gecko does not render empty divs, so this will not always work. Sticking a non-breaking space in there, or a comment, may help, but not always.

Option 4

br { clear: both; }
This is safe and reliable, but BR also carries some default behaviour of a certain amount of vertical space that you cannot alter.
You can always create classes of BR's, and each could behave differently.

The following are good styles to apply to a br or div element to make it take up no space when clearing:

.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

Option 5

http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp

CSS:

.newBFC {
  overflow: hidden;
  _overflow: visible;
  _overflow-x:hidden;
  _height: 0;
}
/*\*//*/ 
.newBFC {display: inline-block;}
/**/

XHTML:

<div class="newBFC">
  <div class="floater">
    This text won't extend past the bottom of the "newBFC" div.
  </div>
</div>

This solution creates a new block formatting context in all browsers which should assure a similar display across the board.

I like that is is easy to use.

I like that is is easy to use too.

Such a great resource. If your in need of a wedding photographer in the Aspen Colorado area, be sure to check it out.