...

View Full Version : Best way to clear a floated element?



moss2076
01-04-2008, 01:56 PM
What is the best way to clear a floated element? Im talking when an outer div wont wrap or clear a floated element.

I am aware of two ways but Im unsure which is best or even if there is another better way -

a) Putting <br style="clear: both;"/> after the div you want to clear..

b) by using CSS? -

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1&#37;;}
.clearfix {display: block;}
/* End hide from IE-mac */

...and applying the .clearfix class to any div you want to clear.

Which should I be using?

VIPStephan
01-04-2008, 02:04 PM
None of these you should be using as both add redundant stuff to your document. While the :after pseudo element method is less bad there are two other – and better – ways.

1.: Containing floats. A parent element will enclose a floated element if it’s floated itself, i.e. if the original floated element is contained in another floated element. You can set that outer element to a 100&#37; width (or a fixed pixel width, whatever is best) and it will look like normal.

2.: Overflow. Setting the overflow of the parent element to auto or hidden will make it enclose the floated element. Note that this works in IE only if the element has layout (http://www.satzansatz.de/cssd/onhavinglayout.html). And this won’t work well if you have to set a height or width for the parent element as this will trigger the overflow behavior.

moss2076
01-04-2008, 02:21 PM
Thanks VIPStephen

I have only used the <br style="clear:both"> in my code until now.

I have removed them from the code in the link below and used the following on 2 divs to make them clear properly -

http://www.siteoftom.com/dualfaux.html

BackgroundDiv - added float left (there is a left floated UL inside this div), overflow: auto, and width:100&#37;

BackgroundDivInner - added float left, height:100% and width:100&

Adding these statements has made both of these divs clear properly, I think I have done it correctly, but im not too sure as to WHY adding float left, height and width 100% makes the divs clear.

rmedek
01-04-2008, 06:10 PM
None of these you should be using as both add redundant stuff to your document. While the :after pseudo element method is less bad there are two other – and better – ways.

1.: Containing floats. A parent element will enclose a floated element if it’s floated itself, i.e. if the original floated element is contained in another floated element. You can set that outer element to a 100% width (or a fixed pixel width, whatever is best) and it will look like normal.

2.: Overflow. Setting the overflow of the parent element to auto or hidden will make it enclose the floated element. Note that this works in IE only if the element has layout (http://www.satzansatz.de/cssd/onhavinglayout.html). And this won’t work well if you have to set a height or width for the parent element as this will trigger the overflow behavior.

I totally disagree with this statement. Not only are the other workarounds needy (Not set a width on a design element? Depend on nested floats?), in my experience they can be buggy as well.

I use the PIE method to clear all of my floats and I sleep soundly at night, knowing the children of the world have a better future in a land of elegantly cleared floated elements, regardless of the dynamically generated period:



#floated_element:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}

/* IE 6 */
#floated_element {
height: 1%;
}

/* IE 7 */
#floated_element {
min-width: 1px;
}

The best part is, once this code has been written, clearing floats is just a matter of adding the new elements rather than sussing out who needs to be overflowed and nested and whatnot…



#floated_element:after,
#another_element:after,
#one_more:after,
#and_another:after, {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}

… etc.

moss2076
01-04-2008, 07:00 PM
Wow thankyou for your replies! Is there any clear consensus on this? Two differing answers. Sorry if im being a pain.

I personally think that the css clearfix would work better for me. Why do I have to set widths, heights and overflows to every element that needs it? Surely a single css statement and adding it as a class is easier? I dont know yet because I havent tried!

I do want to thank both VIPStehpen and RMEDEK for your replies though!

rmedek
01-04-2008, 07:06 PM
Is there any clear consensus on this? Two differing answers.

Like most things on the web it comes down to personal preference.


I personally think that the css clearfix would work better for me. Why do I have to set widths, heights and overflows to every element that needs it? Surely a single css statement and adding it as a class is easier?

Sure, go with what works. I like the PIE method because a) you only have to set it up once, and b) you don't need to add extraneous HTML. Unless the element makes sense in the document, you'd possibly have to deal with line-breaks (or whatever element you're using) in the future where you don't want any.

moss2076
01-04-2008, 07:10 PM
Thanks again I will give it a go. I have tried VIPStephens suggestion and it does work. I will now try the css clearfix and take it from there.

Many thanks,

Tom

moss2076
01-04-2008, 07:45 PM
I think Im doing something wrong..I cant get the css .clearfix to work with my code.

The floated element in my code is called "sidecontent". It has 2 divs wrapping it - backgroundDiv and backgroundDivInner. Both these divs hold a faux column (one left, and one right).

I have applied the clearfix class to sidecontent but it is making no difference.

What am I doing wrong?

www.siteoftom.com/dualfaux2.html

sobrien79
01-04-2008, 08:07 PM
I believe clearfix needs to go on the sidecontent container. Not on sidecontent itself.

moss2076
01-04-2008, 08:16 PM
I've tried adding as a class to backgroundDiv and also backgroundDivInner, but nothing is happening.

BackgroundDiv is the main wrapper, with backgroundDivInner serving the righthand faux-column.

It just isnt working...

www.siteoftom.com/dualfaux2.html

moss2076
01-04-2008, 10:50 PM
Well I think I have got the .clearfix to work. I had to find an updated version of the code to work with IE7, from http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/

I just need to see what it looks like in other browsers now.

As Im designing in DW CS3 (dont moan!) the hack doesnt show up in DW's design view, the divs still dont clear in DW Design View which is a pain because using <br style="clear: both;"/> instead displays the layout in DW the same in IE, FF, Safari etc. And for the sake of me only using 3 of <br style="clear:both;"/> in my site I dont think that is too much of a hassle.

So for now im going to stick with what I had I think.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum