CSS: Clearing Floats in All Browsers

Floated elements have always caused problems with web developers due to the way they are handled in different browsers...mainly Internet Explorer causing the most trouble. There are a few ways that people have used over the years so I thought I would share my experiences with them and show the one that I have found to be the most efficient.

The clearing div method is possibly the worst one I have come across, and although it does work, I have never used it because it is just unnecessary and bad form! It involves adding an empty div to force the bottom of the wrapper past the floated div and clear any content:

<div id="wrapper">
     <div id="floated-div">
        <p>Some content in here</p>
     </div>
     <div class="clear"></div>
</div>
#wrapper{
     /*stuff*/
    }
#floated-div{
     float: left;
     }
.clear{
     clear: both;
     }

As you can see, lots of floats and you end up with lots of pointless empty divs!

Overflow

The other ways that I have tried in the past were the 'overflow' methods

Either:

#wrapper{
     overflow: auto;
     }

Or:

#wrapper{
     overflow: hidden;
     }

Again, both of these methods work and I used each of them for a while until I came across their flaws. Some browsers on certain operating systems would add in an unwanted scrollbar with the 'auto' method and I found that some browsers were cutting off content or hiding it completely with the 'hidden' method. I can't remember the exact browser/os versions but I do remember checking a page in browsershots and seeing a lot of the results with these problems.

My Favourite Solution

So, the solution I have used for the past few years and have never had any problems with so far is this one:

#wrapper:after{
     display: block;
     clear: both;
     content: " ";
     }

I suppose it is very similar to the first nasty div example, but it doesn't add any unwanted elements to your page and if you have several divs you need to apply it to, you can just separate them with commas:

#wrapper:after, #wrapper2:after, #wrapper3:after{
     display: block;
     clear: both;
     content: " ";
     }

Anyway, that is my preferred method of clearing floats. It is the only one that I have never seen any bad results with and it works in all browsers that I have come across. Enjoy!

Leave a Comment

All comments are appreciated. Comments are moderated before appearing on the site, so please don't bother trying leaving spam! Only genuine comments will be shown.

Your Name

Email Address (optional)

What year is it? (Spam Prevention)

Comment

Your Comments

Comment by Mike on 16th September 2011 @ 3:09 pm (GMT)

I used the overflow:auto technique for a while both before and after different clearfix class methods. It's a quick solution most of the time but you have to factor in the user-base with irregular browser settings, some of which are set within irregular browsers. The scrollbar appearing within a set dimension div can really break your layout. A website that suffers from "class-itis" is rarely a positive thing, but at least in the glaring case of float clearing, there are no hiccups.

Comment by Bette on 18th August 2011 @ 4:08 pm (GMT)

Never seen a bteetr post! ICOCBW

Comment by Rob Allport on 12th July 2011 @ 7:07 pm (GMT)

One thing to note about the final solution, using the the content:" ". IF you ever run your css files through something like yui or any other online css compression service, the second quotation mark seems to break them. After compression, make sure this hasn't happened :)

moo.com business card printing123-reg Domain names

What's All This About?

Deanblog is a collection of articles written by Dean Morgan from Deanzod Limited. The aim of the site is to provide helpful information for everyone from web designers & developers right through to website owners. I will try and keep a good balance of information such as php/mySQL tutorials, html/css tutorials along with marketing ideas and advice for website owners.

Recent Articles