SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to check if clearfix is working

    Hi all
    I have added this code to my website to get rid of an empty div that was used to clear elements. Stupid question apologies in advance but how can I check if the clearfix is working? I commented out the css and it doesn't make any difference the page looks the same. Thanks

    HTML Code:
    /* new clearfix */ 
    .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 */ 
    
    
    <div class="floatingrightmenu clearfix">This floats right</div> <p>This text is cleared below it.</p> 

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The point of clearfix is to apply it to a parent container that is not floated but which contains floated children. If the container is not floated but its content are, the contents will hang out. Clearfix stops that. Since this div is already floated, you don't need it. You may have applied it to the wrong element.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Much less that 'clearfix' is an unnecessary bloated useless construct that has no business being used on 99% of the pages people apply it to... though Ralph kind of hit it on the head, your question and your code don't make any sense.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi deathshadow yeah I am trying to use it in the way Ralph explained. I am changing
    HTML Code:
    <div class="cleared"></div>
    to clearfix according to a tutorial I am following (found when googling).
    This is legacy html on a wordpress theme I'm customizing, so my initial question was because I was questioning the reason for
    HTML Code:
    <div class="cleared"></div>
    being there in the first place. I couldn't actually see any error or change when I deleted the line so I was just wondering in what instances it would create problems without it. Anyway I think it may have just been that the wordpress theme html was badly written and now my new clean code has got rid of that issue or needing to clear content. Hope I am making sense!


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
  •