CSS Clearfix

What is it?

I love this bit of script,

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

I use this bit of script on every website I build (as a web developer). I think this is the greatest bit of code to help debug quicker and position better.

I must be honest I got this idea from this site http://www.webtoolkit.info/css-clearfix.html hover there is a tiny difference many people may have been put off by it as it may display an unwanted dot (.), fear not as this content: “\00A0″; does that extra trick, it makes a white space as oppose to a dot.

How does this work?

Well you just add that to your css file and then you can use it as you would with normal class attribute like `<div class=”clearfix”>Content</div>`.

This is especially useful for the following code inspect this on your firebug and I promise you that you will love the result.

<div class="clearfix" >
  <div style="float: left;">left</div>
  <div style="float: right;">right</div>

You will quickly discover that the .clearfix div has lost it’s height. due to some bug I couldn’t care much :) but by using clearfix, this will display the div as a block and allow the div to have a height.

  • http://capsiplex-pills.weebly.com capsiplex

    Hello are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and create my own. Do you need any html coding expertise to make your own blog? Any help would be greatly appreciated!

    • http://www.jqui.net/members/valtid-caushi/ valtid.caushi

      Well it really depends how much you can tolerate some annoying little things… for example mis placed images or it doesn’t look as best as it should, add borders remove them. Bu essentially you can install wordpress, (you need a mysql database ready) and you can choose any free themes that come with wordpress.

      You can use plugins, but I would recommend that you install a blog on a sub directory first to play about with it so you familiarise yourself with it a little.

      There are loads of tutorials and places you can get help and started and if you really have some time to invest you can learn it’s “wordpress codex” and you will be good :)

  • bayan escort

    How do you make this blog site look this good. Email me if you can and share your wisdom. Id appreciate it.

  • http://www.yahoo.com/f9ad538f2522a413879a0624cdae672018bbd76c site

    If you could message me with some hints & tips on how you made this site look this good , I would be thankful.

  • here

    This really answered my problem, thank you!

  • website

    Wanted to drop a comment and let you know your Rss feed isnt functioning today. I tried including it to my Google reader account and got nothing.

    • http://www.jqui.net/members/valtid-caushi/ valtid.caushi

      I have just tested this and it works the link you are looking for is http://www.jqui.net/feed/ you may put this on your google reader and it will work :)

  • Brigite

    hi, you have a great website, informative. please keep posting.

  • Misa

    I just added your web page to my bookmarks. I enjoy reading your posts. Thank you!

  • Susan

    Love what you are doing with the blog man!