Blog

The clearfix hack

The "clearfix hack", a way of clearing floating html elements within a container without an additional clearing element simply by using a CSS class. css-tricks.com maintains a good article about the current state of the art.

Previous versions of the clearfix hack were true cross-browser implementations, some even considering IE for Mac. However with the decline of IE6, IE7 and of course IE-Mac these cross-browser considerations are not that important anymore. Thus the most recent and also most straight forward implementation is simply:

.cf:after {
	content:"";
	display:block;
	clear:both;
}


This creates an empty block element at the end of the container with a clearing attribute. Simple enough. I changed it from display:table; to display:block; since table is only necessary when using :before. But the contenteditable problem in Opera seems to be gone, thus the :before style is not necessary anymore either (see Nicolas Gallagher's micro clearfix).

A test of this clearfix method can be seen in this jsfiddle from my CSS Only Equal Height Columns article.

CSS Only Equal Height Columns

Website designers often want to create columns that are equal but still dynamic in height. i.e. the height of all the columns should be dictated by the largest one. This is not that straight forward though using only HTML and CSS and there are many different ways to do it. Some are more convenient than others, some use JavaScript for the sake of having a simpler mark-up.

I recently had a go on it myself, using a method that I haven't seen on any of the popular (albeit already old) tutorials: using "background divs" behind the actual content divs.

css-tricks.com has a comprehensive list of methods for Fluid Width Equal Height Columns. Many of these methods use simple backgrounds or column oversizing in conjunction with overflow:hidden in order to get the visual effect of having columns that are all equal in height. However, if you want to have more complex backgrounds or borders on your columns, these methods aren't suitable. We need to assign those CSS properties to block elements that are properly aligned with our content.

Read more …