Comments on: CSS Floats: Clearing without extra mark-up!

By: Dan

Dan — Wed, 06 May 2009 18:12:46 +0000

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

By: paris @ united worx web design

paris @ united worx web design — Sat, 31 Jan 2009 14:13:55 +0000

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%;
}

By: Jacques

Jacques — Sat, 24 Jan 2009 22:04:40 +0000

I use “overflow:hidden” and “zoom:1″ for IE. Works everytime.

By: 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?

Fri, 23 Jan 2009 07:58:28 +0000

[...] 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) [...]

By: Anatoli Papirovski

Anatoli Papirovski — Fri, 23 Jan 2009 01:55:55 +0000

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.

By: Jordan

Jordan — Thu, 22 Jan 2009 13:59:08 +0000

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…

By: Dan Wellman

Dan Wellman — Thu, 22 Jan 2009 12:54:12 +0000

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

By: Timo

Timo — Thu, 22 Jan 2009 10:05:31 +0000

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..

By: Andy Ford

Andy Ford — Thu, 22 Jan 2009 08:10:19 +0000

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

By: Mike van Hoenselaar

Mike van Hoenselaar — Thu, 22 Jan 2009 06:52:37 +0000

Try use it with height:1% and display:block. No scrollbars.

By: Ben Tortora

Ben Tortora — Thu, 22 Jan 2009 06:40:35 +0000

You have no idea how long I have been looking for a solution to this.

Exactly what I have been searching for!

By: admin

admin — Wed, 21 Jan 2009 14:59:26 +0000

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.

By: thomasd

thomasd — Wed, 21 Jan 2009 14:55:27 +0000

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.