nclud is a creative web design agency bringing the web together through unique, stylish, and usable designs.

ClearFix is out! We're moving on

The ClearFix hack was great — it was actually a life saver several years ago when cross-browser support and CSS never played nice. We wanted to be table-less and needed floats to control our multi-column layouts; but then there was the clearing issue and ClearFix was there to save us every time.

Now things are getting better and the push to have standards-based mark-up and valid CSS with little to no hacks or filters is growing. Everyday we are getting closer and closer to creating complex layouts that require no conditional comments, no hacks and no filters – and stay perfectly valid and semantic. In a continuing effort to move in that direction — we had to seek out an alternative to everyones favorite hack; ClearFix.

There are hundreds of blog posts on this topic, it seems to highly talked about. But, we needed a solution just right or us and using the overflow property wasn’t flexible enough and other solutions didn’t validate perfectly.

So, we found this and love it:

.clear {
	display:inline-block;
}
.clear:after {
	display:block; 
	visibility:hidden; 
	clear:both; 
	height:0; 
	content: "."; 
}

Note that “display:inline-block;” can essentially be anything that triggers hasLayout in Internet Explorer (thank you Mr. Jason Garber for that tip).

It is nothing ground-breaking and nothing we invented … just a tip for those out there frustrated with the ClearFix hack and its many complications as well as for those looking for a cleaner more pure solution.

Note: this is admittedly very very close to the original ClearFix hack — it just slightly lighter and cleaner.

Posted by Martin Ringlein on January 29, 2008 | Permanent Link |