Comments on: Overflow – a secret benefit

By: Nicole Sullivan

Nicole Sullivan — Sat, 17 Jul 2010 21:54:38 +0000

@ivanhoe That should be:

.media { overflow:hidden; _overflow:visible; zoom:1;}

By: ivanhoe

ivanhoe — Sat, 17 Jul 2010 19:25:01 +0000

@Nicole: I’ve seen your talk at Velocity 2010, and in the FB example, you are using the same trick with overflow, as described here. But in that example you’ve got overflow repeated twice:
.media { overflow:hidden; overflow:visible; …}

What’s the catch with this?

By: Nicole Sullivan

Nicole Sullivan — Wed, 07 Jul 2010 07:18:52 +0000

@lonut Popa – wow, Theirry’s explanation is great. Far better than mine. Thanks so much for the link.

By: Ionut Popa

Ionut Popa — Mon, 05 Jul 2010 10:18:09 +0000

Thierry explains this situation pretty good here: http://carsonified.com/blog/design/everything-you-know-about-clearfix-is-wrong/

By: Julián Landerreche

Julián Landerreche — Wed, 30 Jun 2010 15:36:58 +0000

I’ve wrote about this method[1] long long time ago, at the time I read the “simple clearing” article by SitePoint.
I called it the “panacea technique”: Just add “overflow:hidden; height:100%;” to any box that needs clearing and your life problems will be solved, even on IE6, without any glitch nor inconsistency.

Regarding the ugly clearfix method, it has been revised recently (well, last December) by PerishablePress[2].
The advantage of the clearfix method over the overflow method is that it’s more “CSS3″ friendly, particularly with the box-shadow property. Applying overflow:hidden to a shadowed box will crop the shadow… The clearfix method (new or old) doesn’t have that flaw.

[1] http://forum.textpattern.com/viewtopic.php?id=20059
[2] http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

By: Christian Krause

Christian Krause — Wed, 30 Jun 2010 09:19:06 +0000

Just great, thx for sharing this! By the way i love your oocss framework (:

stay tuned for more happy days!
(:hris

By: Nicole

Nicole — Wed, 11 Nov 2009 05:31:47 +0000

@Arkkimaagi Thanks. With display: table-cell you could achieve the source order you suggest, but it wouldn’t work on older versions of IE. Make sure to use a table-row element as well or the whole thing will be totally broken in all browsers.

By: Arkkimaagi

Arkkimaagi — Tue, 10 Nov 2009 19:53:05 +0000

Nicole, you’re my latest hero! (or is it heroine?)

I was watching Sitepoint CSS frameworks video and they happened to mention your OOCSS video. So I googled, watched and agreed. I’m in the process of creating something similar at my work and as my masters thesis. So I found your thoughts helpful.

Then I decided to visit your site (nice alias btw) and saw this. Altho I did know about using overflow:hidden to clear floats, I did not know about using it to fill space next to floated element. Thanks!

My question however is, could this be applied to something that needs to have source order like this:

[left]
[fluid center]
[right]

to make this:

[left] [fluid center] [right]

fill the whole available area? (I’m thinking navigation for paging) I’ve always found this a bit hard with floats and flexible sizes.

@Ramon Turro – I think she prefers to have the code all in one place (as an library) and to have one less http request. I occasionally consider using similar methods, but I tend to prefer conditional comments, I just wish we’d have conditional comments inside CSS. (there’s an conditional comment thing for js, but I have not seen a CSS one yet)

By: Colonnes CSS fluides — HTML Zen Garden

Colonnes CSS fluides — HTML Zen Garden — Thu, 29 Oct 2009 14:30:51 +0000

[...] Je découvre tout à fait par hasard ce billet de Nicole qui expose une solution très intéressante pour faire des colonnages. [...]

By: Ramon Turro

Ramon Turro — Wed, 30 Sep 2009 11:46:40 +0000

Very interesting stuff, though I have run into some issues with overflow:auto in IE6 and padding. As a sidenote I was very surprised to see someone so well versed in CSS using IE hacks as opposed to conditional comments. What’s up with that?