SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Float Clearing ( what's the best current method?)

    Hi,
    I've just come across a sitepoint blog article that I have never seen before, it is dated /2005/02/26/ and it uses overflow:auto; on the outer div. I must admit I never knew about this article and I am wondering if there are any known problems with this. I thought overflow:hidden; on the outer div had recently become the modern approach.

    SitePoint Blogs >> Simple Clearing of Floats

    I found the sitepoint article from PIE's Easyclearing page, In the Notice as of March 4th, 2008: box at the top of the page.

    PIE:Notice as of March 4th, 2008: The article you are reading is getting a bit old and much new information on the subject of clearing has appeared since it was written. You may find this newer article very interesting.
    (Also, are there any conflicts between the date of the sitepoint article 2005 & the PIE notice:2008)

    I see a lot of people still using the PIE .clearfix method, and I also see a lot of overflow:hidden; being used.

    I understand the importance of keeping clearing elements out of the html . I am just wondering what everyone's thoughts are on what really is the best modern approach to cross-browser float clearing?
    Last edited by Rayzur; Aug 20, 2008 at 12:49. Reason: typo corrected

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best method by far is the "overflow: auto/hidden" method. It keeps your markup clean, and is simple and easy to remember.

    As far as whether or not to use auto or hidden, I believe hidden is the best option, since auto will cause scrollbars if there is a height set. Of course, "hidden" will cause overflow to hide if there is a height set, but that might be the lesser of two evils. In any case, neither should be a problem since any element that you put this on (for clearing reasons) shouldn't have a height set in the first place.

    Louis

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cross-browser clearing besides IE-7 can be by the Clear-Fix method.
    Cross-browser clearing besides IE-6 can be by the overflow setting.
    Cross-browser clearing only in IE can be by a hasLayout trigger.

    Only real cross-broser I think is adding an element and clear that.
    Happy ADD/ADHD with Asperger's

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Ray,

    The overflow method was discovered by me years ago and I mentioned it to Alex hence the article.

    At the time (2005) it caused quite a stir because no one had ever used overflow for this before and a lot of people said it was a hack. However a deeper reading of the CSS specs shows that it is not a hack but the way that overflow's supposed to work in containing so called "invisible" content like floats.

    It can be overflow:auto or overflow:hidden depending on the situation but not "overflow;visible" because that is the default anyway.

    At the time of the article some browsers were a little buggy with the correct use of overflow (mozilla especially) but these days things are much better and its much safer to use.

    The drawbacks are obvious in that if you use auto and the content breaks out of your container you will get scrollbars. On the other hand if you use hidden the content that breaks out will be hidden. Using "hidden" is actually better for IE because it stops floats dropping if elements push it wide but you must remember than any content that won't fit will be hidden.

    The other thing to remember is that overflow doesn't work for IE6 and for ie6 you need to sure that the element "haslayout". This is usually the case as the element usually has a width and then everything is fine. However, if the element doesn't have "haslayout" then the floats won't be cleared and you may thing that you could use the height:1px hack to force "haslayout". This would cause disastrous consequences because the overflow would ensure that all content was cut off at 1px high.

    Many times you can get away with using the height:1% hack because Ie6 treats that as auto when it can't base the height on anything solid. The best "haslayout" trigger would be the correct width ot width:100% or the proprietary zoom:1.0. Ie7 is fine with overflow:auto/hidden though.

    Overflow (other than visible) has many other useful properties and stops things like margin:collapse form occuring and will allow static content to have its background contained within in its own rectangular block when next to a float and allow margins form the float to effect the backgrounds as well.

    The pie easy clearing method is a good method that I also use as it doesn't have any real disadvantages and you can simply add a class to the element in question and the floats are cleared. Occasionally the technique can result in a small gap where the clearing takes place but this goes un-noticed 99.9% of the time. Drawbacks to this method are the amount of code needed but once you've pasted the code in place you can forget about it.

    You also have to remember that the easy clearing uses the height:1% hack so if again you have need to use overflow for its real purpose you could limit the layout to1% high only in iE6 although this is unlikely for the reasons already mentioned.

    Quote Originally Posted by erik
    Only real cross-broser I think is adding an element and clear that.
    No even that fails in mozilla <1.6 and < Firefox 1.5 and under and all netscape 7 and under (IIRC). Unless the element is not empty or that you have added some height to it.

    The FAQ on floats has all this information anyway

    Edit:


    The complete clearfix method is as follows and will clear floats in virtually all browsers including ie5mac and ie6/7

    Code:
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {display:inline-block;}
    /* mac hide \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide */
    Don't be tempted to amalgamate or change any of the styles above or you will break the technique


  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Thanks for everyone's input, it is all helpful info. It's not that I've had a lot of problems with clearing floats, but just wanted to confirm the current clearing methods with all browsers. From what I have read, it looks like the .clearfix method is still a good workhorse since it is completely cross-browser compatible.
    The other thing to remember is that overflow doesn't work for IE6 and for ie6 you need to sure that the element "haslayout". This is usually the case as the element usually has a width and then everything is fine.
    So if I'm not interested in supporting any IE's below IE6, and as long as IE6 "haslayout" (which needs to be done anyway) then overflow:hidden shouldn't create any problems, Thus overflow:hidden; can be sound clearing method for IE6 and all modern browsers. Is my understanding correct there?

    From what I can see the best solution for float clearing in modern browsers is overflow:hidden;

  6. #6
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I remember stumbling across that article about overflow: auto a couple of months ago... and it was a huge 'hallelujah' moment. I immediately started using it, and came across a couple of problems.... sure it cleared things fine, but in IE6 for some reason it tended to play havoc with background images and colours on the same element.

    I haven't tried replicating it since, I might see if I can knock up a quick test example later today.

    edit: and of course now that I try, I can't replicate it. Figures...

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur
    ...
    So if I'm not interested in supporting any IE's below IE6, and as long as IE6 "haslayout" (which needs to be done anyway) then overflow:hidden shouldn't create any problems, Thus overflow:hidden; can be sound clearing method for IE6 and all modern browsers. Is my understanding correct there?
    ...[/COLOR]
    You mean; ... Thus overflow:hidden; can be sound clearing method, not for IE6, but for all modern browsers...
    Happy ADD/ADHD with Asperger's

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    No erik, I guess I had misunderstood!

    I thought Paul was saying that if IE6 received "haslayout" then overflow would work.

    The other thing to remember is that overflow doesn't work for IE6 and for ie6 you need to sure that the element "haslayout". This is usually the case as the element usually has a width and then everything is fine.
    I was trying to find a demo with overflow:hidden on it so I could remove it and watch IE6 fail.

  9. #9
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To be clear; hasLayout clears in IE as overflow does in good browsers.
    Happy ADD/ADHD with Asperger's

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    To be clear; hasLayout clears in IE as overflow does in good browsers.
    Dang-it! You beat me to it Erik j! Thats what I thought, but I had to make a demo to be sure before I put my foot in my mouth. So as my demo shows (I'm sure it's been shone a million times before, but here it is again), IE does not need overflow: hidden to contain the floats - it only needs "haslayout". Now I understand perfectly! Sky's the limit baby!

    Important little note though. Just as Paul warned earlier, height: 1&#37; hack for IE6 clips the floats badly in my demo. So I used a width instead which worked perfectly! Needless to say, I'll be changing that in my default CSS immediately. Sorry if I lead anyone astray. You know, all my followers - NOT!
    Last edited by PicnicTutorials; Aug 20, 2008 at 23:37.

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The overflow:hidden method is very nice, but it can't always be used. If you have a multi-column layout where the layout order is different from the source order (not uncommon), you'll run into trouble. This type of layout is usually achieved with a combination of wrapper padding/margins, negative column margins and relative positioning. The problem is that the relative positioning puts the side columns outside the wrapper, and with overflow:hidden they become … hidden.

    Unless I've missed something important, which is fairly likely.
    Birnam wood is come to Dunsinane

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    To be clear; hasLayout clears in IE as overflow does in good browsers.
    @erik.j - Thanks for explaining, I've got a good understanding of it now.
    Thats what I thought, but I had to make a demoto be sure before I put my foot in my mouth. So as my demo shows (I'm sure it's been shone a million times before, but here it is again), IE does not need overflow: hidden to contain the floats - it only needs "haslayout". Now I understand perfectly! Sky's the limit baby!
    @eric w. - Thanks for the demo, that's what I needed to see. Live examples always help me to understand things better, I understand now that "haslayout" for IE6 and overflow:hidden for good browsers are two separate cases.
    Unless I've missed something important, which is fairly likely.
    @Tommy - Thanks for letting us know about those potential problems with negative margins and relative positioning, will tread with care!

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I think all points have been answered now

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I think all points have been answered now
    Wait, I have one more? So in my demo... the height 1&#37; hack clips the container with the floats in IE6. And width 100% breaks the layout in IE6. So am I to assume that there is no one size fits all that I can apply to my default CSS to give IE layout in order to go along with overflow hidden? Maybe I should just make a note of it in there? Thanks!

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Oops, spoke to soon!

    In my other thread, Centauri gave this solution! This looks perfect to me! Any hidden problems with this? I see none! That's a perfect solution right? Thanks a lot Centauri!

    Thing to watch here is that if the div has overflow:hidden and you apply a HasLayout height for IE6, everything greater than that height will be hidden - you also have to put the overflow setting back :
    Code:

    #content {
    overflow: hidden; /* contain floats & haslyout for IE7 */
    }
    * html #content {
    height: 1&#37;; /* haslayout for IE6 */
    overflow: visible;
    }

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    @eric w. - Thanks for the demo, that's what I needed to see. Live examples always help me to understand things better, I understand now that "haslayout" for IE6 and overflow:hidden for good browsers are two separate cases.
    No problem Ray! That demo was as much for me as it was for you or others. In fact, I think I'm going to see it through and put all of the clearing methods in there. It's really the only way for me to completely grasp all the in's and out's of each.

  17. #17
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The FAQ on floats has all this information anyway

    Edit:


    The complete clearfix method is as follows and will clear floats in virtually all browsers including ie5mac and ie6/7

    Code:
    .clearfix:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {display:inline-block;}
    /* mac hide \*/
    * html .clearfix {height: 1&#37;;}
    .clearfix {display: block;}
    /* End hide */
    Don't be tempted to amalgamate or change any of the styles above or you will break the technique

    Thank you, Paul. I've always used 'clear:both' in the past and it worked fine, but today I spent the last 3 hours attempting to fix an issue where it clears too much (not just within the current container) -- the fix I found works in mozilla but not ie6.

    Switching over to your 'clearfix' method took care of ie6 and now it works beautifully.

    Code:
    #sidebar .ads {
    	overflow: hidden;  /* for moz, set new block formatting context to localize the clear, 9.4.1 of specs */
    }
    #sidebar .ads img {
    	float: left;  /* remove spaces between images 20081005 */
    }
    .clearfix:after {	/* pob 20081005 */
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {display:inline-block;}
    /* mac hide \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide */
    
    
    <div class="entry ads clearfix">
    <a href=""><img src="" /></a>
    <a href=""><img src="" /></a>
    <a href=""><img src="" /></a>
    <a href=""><img src="" /></a>
    </div>

  18. #18
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The overflow:hidden method is very nice, but it can't always be used. If you have a multi-column layout where the layout order is different from the source order (not uncommon), you'll run into trouble. This type of layout is usually achieved with a combination of wrapper padding/margins, negative column margins and relative positioning. The problem is that the relative positioning puts the side columns outside the wrapper, and with overflow:hidden they become … hidden.
    Hmm, I haven't had that type of problem. I don't use positioning, just margins and floats.

    I had an instance just last night where I was using overflow:hidden;width:995px; no problems until I came to a page where a little mascot guy was half hanging out of the div... the problem there is that he was cutoff. Overflow:auto would make the div have a horizontal scrollbar. So while 99&#37; of the time overflow is great there are times when it can't be used.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rochow
    Hmm, I haven't had that type of problem. I don't use positioning, just margins and floats.
    It's also a problem in my negative margin float examples (such as in the three col sticky thread) where I use the negative margin technique to make equal columns. This relies on pulling the columns outside the parent and the overflow method can't be used here either.

    Quote Originally Posted by rochow
    So while 99&#37; of the time overflow is great there are times when it can't be used.
    Yes, most of the time its fine and the easiest solution (and as long as people understand why and how its working then they can avoid obvious problems. )


Bookmarks

Posting Permissions

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