CSS Selector :after

I have two divs, 1 floats left the other right.

I need to add a clearfix after the right float and have been reading up on using the :after selector.

I've tried to create this style and add the relevant attributes only it doesnt seem to work, am I understanding this开发者_运维问答 rule incorrectly?

Any advice would be great!

http://jsfiddle.net/hjP6f/

It's the footer that you want to add the clear fix to:

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

What you're basically saying here is that at the end of the #footer div, add some content and make it display block, then make it clear both. This will pull the footer down over all floating content.

Update of your code: http://jsfiddle.net/hjP6f/1/

.

Just add overflow:hidden; to #footer. It will establish a new formatting content which allow it to encompass its flotant children.