- This topic is empty.
July 17, 2013 at 10:06 am #46465
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.
content: ” “; /* 1 */
display: table; /* 2 */
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
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?July 17, 2013 at 10:11 am #143330
Clearfix should be applied to the **parent** elements which contains floated elements not the children (unless they also contain floated items).July 17, 2013 at 10:13 am #143333
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 elementsJuly 17, 2013 at 10:16 am #143334
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.July 17, 2013 at 10:20 am #143335
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.July 17, 2013 at 10:23 am #143336
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 > headerJuly 17, 2013 at 10:26 am #143337
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).July 17, 2013 at 10:32 am #143338
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.July 17, 2013 at 10:36 am #143340
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?July 17, 2013 at 10:42 am #143342
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. ThanksJuly 17, 2013 at 3:51 pm #143400AlexParticipant
I usually concern myself with making something that works instead of following ‘convention’, but that’s just me.July 18, 2013 at 9:02 am #142718PicnicTutorialsParticipant
Here is all that is necessary if you are no longer supporting ie6/7.
}July 18, 2013 at 10:10 am #143468
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.July 18, 2013 at 4:12 pm #143527AlexParticipant
> 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.
- The forum ‘CSS’ is closed to new topics and replies.