TextMate snippet for clearing floats

Is this your first visit? You may want to subscribe to the feed.

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.

Code: css, CSS, float, textmate Jul 14, 2007 ● updated Jul 15, 2007 ● 5 comments

5 comments

The cure looks worse than the disease.

Joseph E. Davis July 14, 2007 at 09:34 PM
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.

Jacob Radford July 14, 2007 at 09:39 PM
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

meekish July 14, 2007 at 09:50 PM
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 { ... }
- html .blah, * html .moo { ... }
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.
Cristi Balan July 15, 2007 at 04:12 AM
Jacob: thanks, I didn’t know that. This is my first foray into TextMate snippets.
Cristi:

A nicer approach would be to just use a rule with more selectors.

Yeah, that’s usually what I do.

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.

(shakes finger)

Brandon July 15, 2007 at 04:28 AM

opensoul.org