Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts

    Best way to clear a floated element?

    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?
    Last edited by moss2076; 01-04-2008 at 01:58 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    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. 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.

  • Users who have thanked VIPStephan for this post:

    moss2076 (01-04-2008)

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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.
    Last edited by moss2076; 01-04-2008 at 03:08 PM.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by VIPStephan View Post
    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. 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:

    Code:
    #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…

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

  • Users who have thanked rmedek for this post:

    moss2076 (01-04-2008)

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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!

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by moss2076 View Post
    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.

  • #7
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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

  • #8
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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

  • #9
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    I believe clearfix needs to go on the sidecontent container. Not on sidecontent itself.

  • #10
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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
    Last edited by moss2076; 01-04-2008 at 09:49 PM.

  • #11
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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/archiv...eeded_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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •