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:

big floating contents

Main Content

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:

This text won’t extend past the bottom of the “clearfix” div.

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

Tip 3

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:

This text won’t extend past the bottom of the “newBFC” div.

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

Courtesy by: http://tutorialfeed.blogspot.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: