5 Handy tips to fix space beneath floated elements

When two elements are floated in a div, chances are parent element no longer contains it because the float is removed from the flow. Here I am sharing five quick tips to fix this problem.

Tip 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%;

}

Tip 2

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.

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

Tip 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;}

Tip 5

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.

Do you have any opinion, leave a comment.

Source:http://css-discuss.incutio.com

Related Posts :