SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Clearfix Use It Or Dump It?or Dumpage

    Sitepoint Members,
    What do you have to say about .clearfix?

    One person told me "a pointless useless outdated HTML element"

    While perishable press says "...is a useful method of clearing floats."

    Perisable Press' code :

    .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    * html .clearfix { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */
    The New Clearfix Method

    is far different from what a programmer used on my site a few years ago

    .clearfix{clear:both;overflow:hidden}

    Sorry about that title. You should be able to edit a title.

    Thanks,

    Chris

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Anytime i use floats i always use clearfix as sometimes using overflow can yield undesired results depending on the type of project been developed. Personally i have never tried the new clearfix approach because i have used the classic version for so long just because it works great and the old saying goes

    "if it ain't broke why fix it?"

    I stick by that as it may be great to keep technologies you use up to date but at the end of the day if what you have works stick with it as i have experienced in the past one small change can make something crap itself which is why i only update if its 100% necessary to do so.

    That's just my 2 cents.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I have not in the past six years seen a use for clearfix, clearing div's or any of the rest of that nonsense in a single layout I've coded. The natural wrapping behaviors of float containers, overflow on containers, haslayout for legacy IE gets the job done just fine.

    EVEN if you are using clearfix's CSS, there is NOT excuse to be bloating out the markup by giving it a class when you should be just targeting the element. That turns it into presentational CSS, defeating the point of separating your presentation from the content in the first place. At that point you might as well start using idiotic classes like "width960", "left" or the all-popular "smalltext" -- which basically screams "my head is still wedged up HTML 3.2's backside!"

    class="clearfix" is an idiotic construct used by people who are too lazy to learn to code a layout properly... that or they don't have the cojones to kick the artsy fartsy "but it works in photoshop" nimrod in the junk.

    Overflow:hidden works fine in the majority of cases -- and don't give me that "what if you want a element hanging out" nonsense either -- if it's supposed to be outside the container, what the devil is it doing inside it in the markup?

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It comes in handy, like anything else. But consider that you can clear floats by floating the container and giving it 100% width. or using a natural sibling, if that's not an option overflow:hidden; is a graceful alternative; also you can change the display mode ( table, inline block, etc.).. but that has its issues.. so if all of hat fails ,clearfix becomes and option.

    As DS60 said, whatever method chose you DONT necessarily have to use it as a class that you slap around to all wrappers, you can create the rule in your CSS and add to all the elements that need it, that way you dont clutter your markup.
    EG:
    #contentwraper,.someWrap,.anotherClassThatNeedsIT,.hasFloatsInIt{overflow:hidden;}

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Oh, I'd also point out that this:

    * html .clearfix { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

    Can often cause more problems than it solves. In some layouts haslayout can CAUSE errors rather than fix them... particularly zoom since it also trips the seldom discussed "zoomfix" on things like LI, a different behavior from haslayout. (though that's more of a IE7 specific thing).

  6. #6
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Dresden,DS60,
    When you say - you can create the rule in your CSS and add to all the elements that need it, I'm not sure how to apply clearfix to the elements that needed it. Here's what the programmer (of a few years ago) has

    .
    .
    .
    </ul>
    </div></div></div></div>
    <div class="clearfix"></div>
    </body>
    </html>

    Thanks,

    Chris

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    What is that div, why does it exist, does it have an ID on it or a parent with an ID on it?

    It might even be a completely unnecessary div as the behavior may be better placed on all those div being closed above it (though really closing 4 div at once usually means excess/unnecessary div in the layout in the first place!) -- but without seeing the CONTENT being plugged into the code, anything we tell you is guessing wildly.

    Remember, semantic markup with meaningful names on the elements FIRST, THEN worry about layout and CSS; this is where the majority of coders who thought HTML 3.2 was the be-all end-all and still vomit it up today with a tranny doctype on it really tend to drop the ball.

    If it's the page you pointed to on my visitor page, then it's DEFINATELY an unneccessary element as that's not even applying clearfix correctly, and is instead treating it like the old clearing DIV -- at which point all .clearfix needs to be is "clear:both" and forget the rest.

    This:
    Code:
    <div id="colmid"><div id="colleft"><div id="col1wrap"><div id="col1">
    and this:
    Code:
    </div></div></div></div>
    being pointless wasteful and for the most part presentational markup. Has no place on the page... see the rewrite I did for you that did away with that and while it has almost as many DIV, those DIV have meaningful names saying what things are on them, and doesn't need that clearfix nonsense as #columnWrapper is handling that. (with width:100% and overflow:hidden

    You did get that link for the rewrite via PM, right?

    Where you have:

    Code:
    </ul>
    </div></div></div></div>
    <div class="clearfix"></div>
    My rewrite has:

    Code:
    		</ul>
    	<!-- #secondSideBar --></div>
    	
    <!-- #columnWrapper, #pageWrapper --></div></div>
    Two less div and no clearfix nonsense needed... and comments to tell you what's being closed.

  8. #8
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    DS60,
    I did get the rewrite in your PM. I really appreciate the rewrite, but applying it to my site would be a real overhaul for my skills and not being a skilled programmer, making the changes will take me a year and a day all to save a few divs.

    If nothing else, I'll change
    .clearfix{clear:both;overflow:hidden}

    to .clearfix{clear:both} like you were saying.


    Thanks DS60,

    Chris

  9. #9
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    DS60,
    If I place the divs where you have them, making the change should be easy- it will save me from having to try to visulaize what div is doing what. I ran your rewrite through
    Yellowpipe - Lynx Viewer

    and the left and right columns did show up last as I want. So the last thing is what css will I use for
    <div id="pageWrapper"><div id="columnWrapper">
    <div id="contentWrapper"><div id="content">
    ?
    Would you send me the css you used to make that page?

    Thanks,

    Chris

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    The directory on the link is wide open. just pull off the template.html from the URL and you'll have access to all of it.

  11. #11
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Got it. Thanks

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As an aside the perishable press clearfix version is broken anyway because they have removed the dot from the content property which was put in place to stop margin collapse. Without the dot Firefox will collapse a following element's margin onto the main parent.

    example.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content="" />
    <style type="text/css">
    * {margin:0;padding:0;}/* for testing only */
    h1 {
        background:red;
        height:100px;
    }
    #content {background:#bbb}
    #bg {background:#ccc;}
    .inner {float:left;}
    p.footer {
        margin-top:100px;
        background:#fcf;
        clear:both
    }
    #bg:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";/* add a dot here to stop margin collapse */
        clear: both;
        height: 0;
    }
    #bg{zoom:1.0}
    </style>
    </head>
    <body>
    <h1>header</h1>
    <div id="content">
        <div id="bg">
            <div class="inner">
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </div>
        </div>
        <p class="footer">Footer </p>
    </div>
    </body>
    </html>

    In Firefox you get a big gap between the header and the content and not between the footer and the content as shown in other browsers. It's the same bug you get in Firefox if you use an empty clearer div (<div style="clear:both"></div>) without adding a height or content or overflow:hidden.

  13. #13
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    Perishable has some pretty nifty code on their site. Too bad they didn't catch that error.

    Chris

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Perishable has some pretty nifty code on their site. Too bad they didn't catch that error.
    Given the inaccessible illegible train wreck of outdated web rot said site is filled with...

    Methinks we have a different definition of "nifty".

    The site it's on ALONE should be enough to tell you not to take advice from them... like the illegible use of text-shadow and white, the illegible color combinations in the comments section, the absurdly undersized and illegible fonts -- and that's before you look under the hood at the turdpress train wreck of statically inlining the HTML 5 shiv stupidity, non-semantic markup, and other "We think HTML Strict was a horrible idea" nonsense that shows that whoever is behind that site needs to do the world a favor, back the blazes away from the keyboard, and take up something less mission-critical like macramé weaving.

    But what can you expect from people actually think Wordpress is a good thing.

  15. #15
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    635
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    DS60,
    I'm not a wordpress fan either.

    Chris

  16. #16
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    The "overflow hidden" technique has been working for me lately.
    The only code I hate more than my own is everyone else's.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Paul,
    Perishable has some pretty nifty code on their site. Too bad they didn't catch that error.

    Chris
    Thierry also caught that bug and has an improved version here and talks about why clearfix gives different results depending on browsers.

  18. #18
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Dumb it. Ever since deathshadow60 recommended I drop it I kind of did. Never had to use it since.

    Many professional sites use ClearFix solution, but considering they don't have to, then why do so. Makes little sense is doing something you could rather do without.

    From personal experience I could get my clearFix's to look the same in all browsers. I used line-height:0px; font-size:0px and by putting in an empty space. &nbsp; in the div, it would somewhat fix the browser consistency problems.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Thierry also caught that bug and has an improved version here
    I can't tell from that page which version he is saying to use. Is it the last one?

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I can't tell from that page which version he is saying to use. Is it the last one?
    Yes

    It wasn't very clear was it.

  21. #21
    SitePoint Addict dnordstrom's Avatar
    Join Date
    Jul 2006
    Location
    Amsterdam
    Posts
    337
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Haven't read every post in detail, but I agree for the most part with deathshadow60 on this one. I rarely use them—these days never. If my head mentions the word "clearfix", I automagically ask myself what I've done wrong. I want my site/app code to be semantic, neat and tidy, and the word "clearfix" makes the whole thing a bit dirty in my opinion.
    Daniel Nordstrom. of. Nintera(ctive)
    -- Featured post: Part 2. Writing NI.JS JavaScript
    ----- Follow me on Twitter. Got project? Contact me.
    -------- SitePoint: Community GuidelinesBe A Great Member

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dnordstrom View Post
    If my head mentions the word "clearfix", I automagically ask myself what I've done wrong.
    EXACTLY!!!

    There's a lot of stuff people do on sites that REALLY needs to fall into that category -- see IE conditional comments for CSS embeds, WORSE IE Conditional comments just for the HTML tag, classes or ID's on body (that aren't for changing via scripting), static CSS or Scripting in the HTML, etc, etc, etc...

    Or even just adding DIV#nav around a perfectly good UL... or DIV#header around a H1 and UL... or <td class="title" colspan="7"> -- Things that in 99% of layouts are just pointless bloat. Things that should immediately make you ask the question:

    What am I doing WRONG?

    But of course since most people aren't smart enough to ask that question, we now have HTML 5 legitimizing half-assed coding practices instead.

  23. #23
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Not to long ago deathshadow60 you said this:

    Quote Originally Posted by deathshadow60
    'empty' unclassed elements don't bother me as much as say... wrapping div with classes on them, presentational tags/attributes (as in elements that only have presentational use like CENTER, ALIGN, etc), or presentational classnames like "red" or "bigtext" -- barf.

    In that way a empty semantically neutral tag like SPAN or DIV? Really not that offensive to me... I don't even mind it with B or I if it's empty.
    With that said, it is easily possible to target an empty div or span without a class as a clearfix. I mean… empty elements don't hurt – right?
    The only code I hate more than my own is everyone else's.

  24. #24
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is always more than one way of skinning a cat when it comes to stuff like this. I've not had to use the clearfix hack myself. So it's not really necessary. Dump.

    Quote Originally Posted by deathshadow60 View Post
    Given the inaccessible illegible train wreck of outdated web rot said site is filled with...

    Methinks we have a different definition of "nifty".

    The site it's on ALONE should be enough to tell you not to take advice from them... like the illegible use of text-shadow and white, the illegible color combinations in the comments section, the absurdly undersized and illegible fonts -- and that's before you look under the hood at the turdpress train wreck of statically inlining the HTML 5 shiv stupidity, non-semantic markup, and other "We think HTML Strict was a horrible idea" nonsense that shows that whoever is behind that site needs to do the world a favor, back the blazes away from the keyboard, and take up something less mission-critical like macramé weaving.

    But what can you expect from people actually think Wordpress is a good thing.
    HAHAHAHA!!!!

    Excuse me while I try my best to stop giggling...

    Seen your homepage lately? I did just now. I had to find out what kind of designer you are after reading:

    the illegible use of text-shadow and white, the illegible color combinations in the comments section, the absurdly undersized and illegible fonts
    Yours isn't perfect is it? Design-wise it's an eye sore from 1999. That's just for starters.

    I don't think I'll be taking you seriously either. I never take incoherent ranters seriously anyway.

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B
    because they have removed the dot from the content property which was put in place to stop margin collapse. Without the dot Firefox will collapse a following element's margin onto the main parent.
    Why does a dot character stop margin collapse but a space character does not? Does the Firefox browser actually read text???

    I've used spaces because hiding the . was more trouble than the gap I usually didn't have anyway because the following element didn't have a margin (cause top margins are devious and bottom margins are less likely to meet you in a dark alley and...).

    Quote Originally Posted by Crusty
    The site it's on ALONE should be enough to tell you not to take advice from them... like the illegible use of text-shadow and white, the illegible color combinations in the comments section, the absurdly undersized and illegible fonts
    Their body fonts are 16px, and while I also have to ctrl++ a few times to make their page actually readable, that's not an insane size to start with.

    But their contrast is 100% retarded. CONTRAST REBELLION

    (this is how the text was for me, meaning I must have visited the page some time in the recent past and needed to increase text size so I could read it. It's really much smaller on my screen if I ctrl-0)


    One of the reasons I like to use Gez Lemon's Web Accessibility ToolBar's Colour Contrast Analyser is because it can tell me with technical certainty WHY something is a fail.
    It's definitely a fail on all three levels though the plugin does not check to see if there's a white text-shadow on the bottom.
    Not that that helps readability in any way, shape or form.


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
  •