Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Clearfix question

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #46465
    MarkRBM
    Participant

    I am using the html5bp and their clearfix is as so

    /*
    * Clearfix: contain floats
    *
    * For modern browsers
    * 1. The space content is one way to avoid an Opera bug when the
    * `contenteditable` attribute is included anywhere else in the document.
    * Otherwise it causes space to appear at the top and bottom of elements
    * that receive the `clearfix` class.
    * 2. The use of `table` rather than `block` is only necessary if using
    * `:before` to contain the top-margins of child elements.
    */

    **.clearfix:before,
    .clearfix:after {
    content: ” “; /* 1 */
    display: table; /* 2 */
    }

    .clearfix:after {
    clear: both;
    }

    /*
    * For IE 6/7 only
    * Include this rule to trigger hasLayout and contain floats.
    ***/

    .clearfix {
    *zoom: 1;
    }

    I have been having problems getting it to work but I figured it out. I have a .mainwrapper div which has margin right and left and it also had height:100%. while it had this height 100% in it the clearfix wouldnt work on any children elements. I am just wondering why that is?

    #143330
    Paulie_D
    Member

    Clearfix should be applied to the **parent** elements which contains floated elements not the children (unless they also contain floated items).

    #143333
    MarkRBM
    Participant

    yeah sorry, within this .mainwrapper div there was a .body div and that had the clearfix class. while .mainwrapper had height:100% the clearfix would not work on .bodys child elements

    #143334
    Paulie_D
    Member

    We’d have to see a link to debug properly.

    I have to say (and this is a personal preference)…I don’t like a .body div inside a .main wrapper.

    I’d go for a different classname…`body` has a specific connotation and I dislike re-using it.

    #143335
    MarkRBM
    Participant

    Would you say the same about using a .header now that there is a head tag? I am not saying this to try and retort in anyway I am legitimately trying to find out what people who do this all the time do as I am in the process of teaching myself these things so I don’t have anyone else to ask.

    #143336
    Paulie_D
    Member

    If there is a header and I need to add a class I would make it more specific to it’s location.

    So I might have

    however for the second I’m more likely to do something like

    article > header

    #143337
    Paulie_D
    Member

    Don’t get me wrong, there is nothing fundamentally wrong with using ‘body’ as a class name, I just think names that are the same as elements avoid any potential for confustion.

    There are exceptions (heading tags [`h1`, `h2` etc.] for instance).

    #143338
    MarkRBM
    Participant

    I understand you, I think convention is important and so far finding out those convention dos or donts is a lot harder than finding out how to code up a responsive grid and when I ask questions on other sites I almost always get called on something that isn’t technically wrong but just isn’t done by convention.

    #143340
    Paulie_D
    Member

    Hey…just my opinion…it may not be the **’overall’** convention (if there is such a thing) but it works for me.

    Back to you original question, do you have a link or could you create a Codepen?

    #143342
    MarkRBM
    Participant

    I am going to leave it for now I was just wondering if there was an obvious answer, there is a lot of code that it might be so unless I run up against the problem again I will forget about it for now. Thanks

    #143400
    Alex
    Participant

    I usually concern myself with making something that works instead of following ‘convention’, but that’s just me.

    #142718
    PicnicTutorials
    Participant

    Here is all that is necessary if you are no longer supporting ie6/7.

    .contain:after {
    content:”;
    display:block;
    clear:both;
    }

    #143468
    MarkRBM
    Participant

    Thanks all. What I meant as far as convention goes was that if I show someone my code (say in an interview) and the first thing that pops out to them are all the things that ‘just aren’t done’ or however you want to put it I don’t think it does me any good. So while I am learning I might as well start with good habits.

    #143527
    Alex
    Participant

    > So while I am learning I might as well start with good habits.

    That’s a very good idea, most people don’t think that way, I sure didn’t.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.