the clearfix

Welcome to the world in which I, your friendly knitting blog host, have been overdosing on html, CSS, and Javascript. It’s a strange world, full of div tags and octothorps (that’s a # sign – but octothorp is more fun to say, right? Almost like a comic book villain).

As a lifelong lover of the semi-colon, JavaScript makes me happy. I hope you don’t mind if I drop a few technical notes in here and there on this fiber-based blog. Particularly since I’m considering a career change into technical writing, I’d love to start practicing now (and not just in the realm of knitting patterns, which are definitely a form of technical writing!).

Let’s start with a handy-dandy way to keep floated elements from collapsing into each other and overflowing while you’re doing a web page layout. (If you have no idea what I’m talking about, the tl;dr is: web pages use secret behind-the-scenes boxes to create a pretty website, and sometimes the boxes overlap when you don’t want them to and then it looks ugly. )

Some Googling leads me to believe that there are a million and a half ways to solve the problem. Here’s the simplest one I can find that’s been working for me on my practice sites, on browsers back to IE8. It’s a two-step process.

1. In your CSS, create a new rule targeting a class. You can call your class whatever, obviously, but .clearfix and .group are the two most commonly used monikers for this fix. For others reading your code, .clearfix is probably the most readable.

.clearfix::after {
content: “”;
display: table;
clear: both;

2. In your HMTL, assign class “clearfix” to the parent class of your problem children. In my case, I had a wrapper div. Like this:

<div class =”clearfix”>

Because the clearfix is a class, you can assign it to as many elements in your website as you need to. Enjoy all the new pretty options that are open to you! Also, if you know about pseudo-elements (apparently that is what the double colon in “clearfix::after” means, please enlighten me!