The Clearfix

You may be wondering what the hell a clearfix is? Well quite simply its a better way of doing clear:both. Its fool proof and works in all browsers, and if you’re not sure what clear:both does, it basically puts a full stop after any floating div.

I see it a lot of the times on forums where people are having problems with their layouts or with the new staff at my work its generally the first thing we have to teach them, there are many problems that can occur when you apply floating div’s but 9 times out of 10 the clearfix will fix it! That’s how fool proof it is. If you can remember to use this you will find that coding sites will be much easier.  Below is an example of the most basic error so you can see what I mean.

Clearfix Eample

Live Preview [opens in new window]

So you must be thinking if this clearfix fixes so many problems it must be a pretty hefty piece of code, well no its really simple actually:

.clearfix:after { content:'.'; display:block; height:0; clear:both; visibility:hidden }
.clearfix { display:inline-block }
* html .clearfix { height:1% }
.clearfix { display:block }

That is all it is! Its CSS so its cross browser compatible, which if you’re in the web design industry you will find everything needs to be these days as you can see there are several different rules, these are as the first one .clearfix:after won’t be accepted by all browsers so there are separate rules that if all else fails the other rules will work.

There is even a shorter version but this hasn’t been tested on ie6 but it works all the way down to ie7 so if you’re like me and don’t really care about the people using ie6 as if they can’t update their browser they shouldn’t be on the internet (either because they are at work or they obviously don’t care about the quality of the websites they visit) you can use the code below.

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Ok so we know what we need to put into the style sheet but if you don’t put it in your markup correctly it’s just not going to work, so to make sure we know how to put it into the markup we need to understand what it does.

Like I said above what you are basically doing is putting a full stop after all the floating div’s that are causing you problems, to illustrate this I’ve mocked up a problem I’ve seen in the past and generally the most common problem.  Where you can see the wrapper div doesn’t fully extend the two floating div’s. You may think it’s not a problem now, but if you wanted to add a footer or add a background to the wrapper div you’re going to have a problem.

By simply adding the class of clearfix to the surrounding div you can see that the div now extends around the entire layout which is great if you want to create sections to sites you can clearly define the area while not being limited to what you can do within the area.

I have created a wireframe of the homepage of Lucid Fanart to show you how it would look without the clearfix and the simple css has saved me a lot of time, and a lot of screwy hacks trying to make everything fit into the space perfectly. As you can see from the example the dark black lines are the areas where I’ve put the clearfix and you can see a difference in the way everything lines up I haven’t even set positions on things I’ve simply written out the markup and done a few lines of CSS and it simply falls in to place.

Clearfix Lucid Fanart Example

Live Preview [opens in new window]

I hope you found this tutorial useful and that you are able to use the clearfix, if you need any help please post below and I’ll talk you through it, if you have an example please add it in and I’ll try and help specifically to your design.

  • Jo@brutalaffection

    great article dee, very helpful. thanks for posting this. ps i miss your art 🙁 hope your well! 🙂

  • Dee

    Thanks Jo, I’m glad you liked it, I’ve had it sat on my desktop for a while I just couldn’t figure out the best way to visually show it, I’ve gotta do more tutorials, the poll in the footer shows I’ve gotta do ps ones and coding ones, if anyone has any suggestions what they wanna see please post them on the comments form I would love to know what to do.

    I miss my art too Jo, I’ve just been in a bit of a rut at the moment so hopefully doing the tutorials will get me back in to it. xD

  • I love this code. It’s been a best friend of mine for some years now and I love when I’m coding, having forgot about and when I add it everything just looks so pretty, finally 😀

    No more rut, we demand art! 😉

    (btw, your fields when making a comment doesn’t tell me what info goes where..)

  • Dee

    Hey Dana, I hope you liked the tutorial, and it was readable? I always worry that I mumble even when typing.

    I know I’m trying to do art I just sux 🙁 but I’m working on my fanlsitings at the moment and then I’m gonna do this site again and hopefully it will get me back into it.

    Sorry about the contact form, I updated wordpress and it deleting some of my hax I made to it, I think next time I’m gonna use disqus much better comment system and it links into social media etc

  • This looks like a useful piece of code 🙂 I’m always looking for better ways to set up my divs, and I’ve not heard of clearfix (although I probably should have!). Thanks for the tutorial, very helpful!

  • Dee

    Thanks Sasha, I hope its useful, I used to really struggle with floats before some times they’d work some times they wouldn’t then when I found out about Clearfix everything was…. well fixed so I hope it helps others like it helped me 🙂

  • Hay hun, almost missed your reply *hangs head*

    I think you did good on the tutorial. Very clear and personal which I liked a lot 🙂 You definitely need to continue writing tutorials!

    (although I’m having issues with this thing in i.e so I’ve decided that I don’t care about i.e.. yet again *lol* ;))

    Aww, it doesn’t suck! I saw your entries over at All Night Noise forum and I LOVED the Julie Benz wall, not to mention those lovely icons that I’m gonna snagg and use on LJ, with your permission of course 🙂 You’ve still got it, trust me 🙂

    No worries about the comment section, just wanted to make you aware 🙂 Discus, is that a plugin to wordpress or something standing on its own? Either way, upside on the whole social network connection. I like when that works! 🙂

  • Dee

    hehe Thanks Dana! its the first thing I’ve done in ages and I quite like how the colours turned out lol

    I wanna write up more tutorials but I need to make a list of things at the moment its just things that crop up a lot lol. but I have plans to do things with this site so it will be easier to update and I don’t have to make giant posts all the time but I need to think about how I’m gonna go about it. might happen after I finish updating my fanlistings.

    with IE at work we’ve started using chrome frame which prompts people to install a chrome plugin so they can view the site like chrome you could check it out!
    https://developers.google.com/chrome/chrome-frame/

    and Disqus is awesome, it can be added into any site not just wordpress but its in plugin format for wordpress, I’ve already set it up for Christine at Surrender Your Soul for her fanfic site which is just html. but I think it also has a notification system for users as well as admin’s which is great and I can export all the posts I’ve already got in wordpress over to disqus so I won’t lose anything.
    http://disqus.com/

  • You should definitely like what the outcome was because I love that wall and I wanna steal all those icons *grin* You’ve definitely still got it.. did I say that already? *lol* ;D

    Sounds like a good idea to really get a hold on what you want to make into tutorials and really organize it all. It does make me curious that you mention you have plans for the site. Seeing as you’re already running wordpress it makes me wonder how much easier it can get when updating 😉

    Oh, I like the idea of that (re: chrome) and I’m definitely going to look into that and put it up on my sites 😀 Thank you for the tip! especially considering how much i.e has made me loose hair over the years! (bastards should pay for hair-extensions at this point!)

    Hmm.. that does sound interesting, but I’m guessing it demands that every piece of news has to have its own page when coding in html..? I’m definitely going to look into this though and see if it’s something of use for me, thanks! 🙂

  • Hey hon, thank you so much for the tag! 🙂 It´s very sweet of you, glad you like it <3 Also it´s very funny to be leaving my message at this post, because I suck at coding, only ever learnt the basics and been making do with that ever since and the clearfix is actually something that I´ve been needing even without knowing about it 😀 Im gonna go continue scrutinising the tutorial and thank you so much for all the effort you put into it, it is really so well explained x

  • Leca
  • Thank you for my lovely Christmas gift!! I slacked this year and forgot to make one. 🙁