CSS Floats: Clearing without extra mark-up!

CSS Floats is one thing that beginners hate. Especially when they learn how they work, and then they head over to IE6 to see their layout COMPLETELY break. Today I will discuss in detail the “overflow:hidden” way to clear your floats without adding any extra mark-up!

Now you may wonder why we need to clear floats. Well if floats are not cleared they will always appear beside each other, and in certain cases you want to break the float after let’s say 3 items.

Example #1

test

Others times you need to clear the floats because if all items inside of a container are floated, the container collapses:

Example #2

test

Now we could use a br / div tag to clear it like so:

<br style="clear:both" />

<div style="clear:both"></div>

This would be useful for example #1 where there is no container for us to latch onto. In example #2 we could simply add the following css rule to our “container” div:

    #container { overflow: hidden; }

In order for IE6 to work you sometimes have to pull strings by adding “position:relative” or “height:100%”.

Our second example with the floats now cleared would now look like this:

test

I hope this has further explained this concept if you are a newbie, or even more advanced but still haven’t quite figured this out.

I suggest heading over to CSS-Tricks.com and view his article on floats if you need another explanation.

Share and Enjoy:

Written by Brenley Dueck

13 Responses to “CSS Floats: Clearing without extra mark-up!”

thomasd Says:
January 21st, 2009 at 9:55 am
I’m always using overflow: auto; on the container to do this, unitl now I’ve never had a situation where it doesn’t worked.
admin Says:
January 21st, 2009 at 9:59 am
Yes… overflow auto; works as well.
The only problem I could see with that is if for some reason the content was larger than the div you would have scroll bars everywhere.
Ben Tortora Says:
January 22nd, 2009 at 1:40 am
You have no idea how long I have been looking for a solution to this.
Exactly what I have been searching for!
Mike van Hoenselaar Says:
January 22nd, 2009 at 1:52 am
Try use it with height:1% and display:block. No scrollbars.
Andy Ford Says:
January 22nd, 2009 at 3:10 am
A word of caution when using this clearing method…
If you need to position a descendant of the containing element outside or partially outside of the container, it will be clipped by the ‘overflow:hidden’ rule.
This can sometimes be an issue with some tooltip scripts for example. But as long as you know it won’t interfere with anything, the ‘overflow:hidden’ clearing method can be extremely handy
Timo Says:
January 22nd, 2009 at 5:05 am
problem #2 can also be solved by floating the container instead of overflow:hidden
so it would be:
#container { float:left; }
that’s how I always do it..
Dan Wellman Says:
January 22nd, 2009 at 7:54 am
in the first example, you can usually get rid of the additonal div or break by clearing the opposite side that is floated, so if all boxes are floated left, add clear:right to the 3rd box, then you can continue floating the lower boxes left
Also, I find it more xbrowser compatible to add an empty comment within a clearing div
Jordan Says:
January 22nd, 2009 at 8:59 am
At my office, we use a modified version of the PIE “clearfix” class (http://www.positioniseverything.net/easyclearing.html), and it works wonderfully. I can’t test it, but does your trick work on IE/Mac? If so, we may have to do some testing with that…
Anatoli Papirovski Says:
January 22nd, 2009 at 8:55 pm
I would advise anyone who uses this trick to consider always adding * html #container {overflow: visible; height: 1%;} for IE. Sometimes the overflow: hidden + nested floats can cause problems and all kinds of weird bugs that are hard to trace back.
As for IE/Mac… what’s the percentage of users on that? Seriously? That’s like caring about IE5… not advisable.
AndySowards.com :: Web Development Nerdy Daily Links For 1/23/2009 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster? Says:
January 23rd, 2009 at 2:58 am
[...] CSS Floats: Clearing without extra mark-up! :: Brenelz’s Web Development Tips :: Winnipeg Web … Quick look into clearing floats without extra markup! (tags: design wordpress nettuts wp-plugins wp scratch custom dev webdesign development webdevelopment wordpress-plugins creating worpress ecommerce plugin php tutorial webdev tutorials plugins howto cms create 5star) [...]
Jacques Says:
January 24th, 2009 at 5:04 pm
I use “overflow:hidden” and “zoom:1″ for IE. Works everytime.
paris @ united worx web design Says:
January 31st, 2009 at 9:13 am
here is what i use and works beautifuly!, i just add the fixed class in my container and it simply works across all browsers.
think i got this from a blog post in cssglobe.com
.fixed:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.fixed{
display:block;
}
/* \*/
.fixed{
min-height:1%;
}
* html .fixed{
height:1%;
}
Dan Says:
May 6th, 2009 at 1:12 pm
Hey all,
I like everyone found this technique really useful, however I’ve come across a problem, that I’m interested to see if people have the solution to. I have a navigation bar made up of floated left list elements, this list is within a container div, i used the overflow hidden technique to clear the float, works like a charm. Here’s the problem on rollover my nav has a suckerfish type subnav. Because of the overflow:hidden the subnav no longer displays, as the container div appears to hide the subnav when it becomes a visible DOM element. Any ideas?
Dan