TextMate snippet for clearing floats
I often use positioniseverything.net’s CSS method for clearing floats without structural markup. The code for this technique is not something that I’ve committed to memory yet, so I’m referencing the article all the time (I could just copy it from another project, but it’s just so much quicker to type “css clear float” into google).
Well, positioniseverything.net is about to get several less page hits per week, because I finally threw the code into a TextMate snippet and assigned it the keyword “clearfix”.
${1:.clearfix}:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
$1 {display: inline-block;}
/* Hides from IE-mac \*/
- html $1 {height: 1%;}
$1 {display: block;}
/* End hide from IE-mac */
$0
Update: DRYed up based on Jacob’s comment.
5 Comments
The cure looks worse than the disease.
Thanks for a great snippet.
Even DRYer – you can replace every instance of ${1:.clearfix}, after the first one, with $1 and it will mirror properly.
Here’s a better cure:
simply set the ‘overflow’ property of the div that needs to be cleared.
overflow: auto;
overflow: hidden;
overflow: scroll;
Any of them will work. The only catch is that in IE6 and earlier, the element must also have an explicit width. ‘width: 100%’ is usually a good place to start.
That’s a little gem I picked up from Transcending CSS
Nice snippet. I think it’ll quickly allow you to create a lot of duplication in your css. A nicer approach would be to just use a rule with more selectors. Not sure if a snippet is possible in this case.
.blah:after, #moo:after { … }
However, I find that I usually just take the not semantic hit and add class=“clearfix” to my html if I need this just for elements with ids.
Jacob: thanks, I didn’t know that. This is my first foray into TextMate snippets.
Cristi:
bq. A nicer approach would be to just use a rule with more selectors.
Yeah, that’s usually what I do.
(shakes finger)
Post a Comment