David Kendall

CSS floats can quickly enable you to create some amazing effects and position blocks of content with ease, if you understand how to use them!

One of the most common float related questions on a css forum I am a member of is that of floats over lapping a container div.

A way around this used to be to use the clear: both method, however this would involve placing an empty div below your content div. Not exactly keeping the layout and content seperate though hey, and after all that is what we all strive to don`t we? There are other problems with the clear method but as we won`t be using it we can ignore them.

Standards compliant browsers utilising CSS 2 have the :after tag at their disposal. This :after tag allows the developer to insert extra characters after the HTML element. A standard method for this is called the clearfix method. For example we have a div containing some text

<div class=’clearfix’>
This blog is
</div>

We can now use the CSS :after property to insert text at th end of this element
.clearfix:after {
content: “great”;
}

The output of the above HTML and CSS would be “This blog is great”

You see how it works? No additional html markup is required and best of all the :after property supports the clear: both property. Now you get the gist, if we use the :after tag combined with a clear: both declaration we solve our problem.

Give it a go, I find I use this quite a lot when dealing with floats, oh and remember to use visibility: hidden and height: 0 if you don`t want the content of the :after tag displaying on the webpage!

Good luck