Aside from browser bugs, float clearing can be one of the most frustrating aspects of CSS development. It takes a little bit of patience and thought to set up your floats and clears in a way that facilitates both your design and the flexibility required in a modern website.

The Old Way

While judging the last contest of CSS Off, one of the things that I found myself repeating over and over again was this: “Don’t use empty divs to clear your floats!” What I meant by that was that in this day and age, there exist much better, more robust, and more semantically correct ways to properly clear floats that simply inserting <div class="clear"></div>.

The Not Really New Way

Enter the EasyClear method. I’m calling this the “Not Really New Way” because it appeared on positioniseverything.net in 2004, but is still being ignored for the old empty clear div solution.

I’m not going to spend time explaining the specifics of why this solution works; they have gone over the technical aspects of the solution in the article, especially different hacks for different browsers. However, before I explain the best way to use the EasyClear on your sites, there is one part of CSS that needs to be understood, since the entire EasyClear method hinges on it: the :after pseudo-element.

:after - Intrigue and Deception

For a long time, I was confused about the :after pseudo-element. After doing a little testing and research, I figured it out. It’s not all that difficult to understand, actually, but I was mislead in the beginning. The w3schools.com’s definition of :after is the first that pops on on a quick Google search, so it was the first place I went:

The :after pseudo-element inserts some content after an element.

It turns out that this is completely incorrect. The actual definition (via The W3) is this (emphasis added):

The ‘:before’ and ‘:after’ pseudo-elements can be used to insert generated content before or after an element’s content.

The difference between the two definitions is considerable. Content inserted using the :after pseudo-element is inserted not after the element, but instead within the element and after the content. See an example here.

You can use :after to insert just about any content you’d like, and give it most CSS attributes, including display and clear. This is how EasyClear works its magic.

Using EasyClear

Using EasyClear is simple. The only trick is to apply it to the correct element. The element that you are going to apply it to most is the element containing the floated elements. For example, a page with a container that has a background you’d like to extend to include the entire content, and two floated elements:

In this example, you want to apply the EasyClear to #container, since that is the containing element. It will insert a block-level element with the clear attribute set to both, thus clearing the floats inside the element without crufting up your HTML. You can see an example at work here, and here’s the EasyClear CSS itself:

/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#container
{display: inline-block;}

/* Hides from IE-mac \*/
* html #container
{height: 1%;}

#container
{display: block;}
/* End hide from IE-mac */

As you can see, it’s pretty simple to employ, and the results are perfect. The best way that I’ve found to implement this on larger projects is to keep the EasyClear in one place, at the bottom of your main stylesheet, and simply add elements that you need to clear to the declaration itself, as illustrated here.

Clears For All

So now you never have to insert an empty div into your otherwise perfectly crafted HTML. Go read the article, learn the background, spread the word, and, please, just start using it!

So I’ve been thinking for a while about what I’d like to blog about, now that I’m at least comfortable (if not perfectly happy) with the presentation of dtott.com. What I decided on is starting an ongoing series of in-depth CSS tips. This will (obviously) be the first one.

What’s A Reset?

A CSS reset is a set of CSS declarations designed to strip away all possible default formatting before adding any of your own. Every browser out there has default formatting for every HTML element. The body element in almost every browser has padding, margins, a set font size and color, and a set background color. Headings have margins, padding, different font sizes, and different font weights. Turn of CSS on your browser while viewing a site, and you’ll see the default CSS that the browser uses. What the reset does, then, is strip all of that away. Headings, paragraphs, fieldsets, and everything else, set to one font, one size, one weight, and no extra paddings and margins.

But…Why?

Well, there’s a few reasons. First, by resetting the CSS, you remove the temptation to rely on browser defaults that may or may not be the same cross-browser. H1s, at least to the naked eye, are pretty consistent across the field. What about fieldsets or dls?
Second, removing that temptation will make you a better CSS coder. By having to explicitly set each attribute on each element you want to use, it forces you to learn what you might normally gloss over.
Third, it will make your code meaner and cleaner. You won’t have to set the margin and padding every time you use a ul unless the design calls for it. No more wasting lines and time undoing what the browser does for you.

OK, I’m Sold. What Now?

Go out there and get a reset! If you are a control-freak-ninja-CSS-master, you could write your own, but there’s no need for this. Eric Meyer has already done it for us: The Eric Meyer CSS Reset. Is this the only one? No. The Yahoo! User Interface Library has a reset, and I’m sure there are more out there. Eric’s is the best. I could go into why, but it’s already been done here and here (including the comments). Just go, get the code, and put it above your stylesheets.

Cool!

I concur. Do you concur?