Comments on: Floats, clears, and color flashes

By: Paul McClean

Paul McClean — Wed, 17 Jun 2009 12:02:43 +0000

Hi guys,
Have been searching for a solution to this exact ‘flickering’ wrapper problem when the wrapper hasn’t got the height from it’s containing elements. The overflow: auto; solution worked perfectly. Thanks so much for posting. The design community thrives because of helpful stuff like this.

All the best,
Paul

By: Redesigned – Jeffrey Zeldman Presents The Daily Report

Redesigned – Jeffrey Zeldman Presents The Daily Report — Sat, 13 Jun 2009 12:17:52 +0000

[...] more about it here, here, there, and elsewhere. (Don’t freak out; these old posts are now in the new layout, adding a [...]

By: Web Design References: Cascading Style Sheets

Web Design References: Cascading Style Sheets — Mon, 01 Jun 2009 23:45:01 +0000

[...] Floats, Clears, and Color Flashes – Jeffery Zeldman New! [...]

By: Amazon.com: Designing with Web Standards (2nd Edition): Jeffrey Zeldman: Books

Amazon.com: Designing with Web Standards (2nd Edition): Jeffrey Zeldman: Books — Thu, 28 May 2009 20:27:34 +0000

[...] that we’re staring on black text / orange background combo for … This is syndicated from Jeffrey Zeldman Presents The Daily Report. [...]

By: Quick scan of the net - wrapper counter « The Seventies

Quick scan of the net - wrapper counter « The Seventies — Thu, 28 May 2009 17:58:39 +0000

[...] http://www.zeldman.com/2009/05/22/floats-clears-and-color-flashes/Solution is very simple – use ‘:after’ clearing for the main wrapper. Sure, it won’t work on IE, but 1) setting width to wrapper sets hasLayout and triggers clearing 2) #footer is still there, in any case. …. At first it’s a bit counter- intuitive to use a giant table to lay out your entire document, but the markup is fairly easy to read once you get your head around it, and it turns out that the rendering is very consistent across browsers, including the dreaded Safari. … [...]

By: Amadeus

Amadeus — Thu, 28 May 2009 16:15:00 +0000

I have to give +1 to :after for clearing floats, although with some small changes.

1) content:’.’ should change to content:”. Why do we need the period in the first place? It has worked on every browser I have tested on.

2) To trigger hasLayout in IE, I just use zoom:1; Sure it’s not valid CSS, but at least it’s competely inobtrusive. Furthermore, I would probably just place that in a IE specific stylesheet, which is full of tweaks anyways for IE. I don’t like to muck up standards based browsers with IE fixins.

By: Robert

Robert — Thu, 28 May 2009 14:40:57 +0000

@Zeldman: Why not apply display: table, display: table-row, and display: table-cell for browsers that can handle it by using, say :nth-child? I know floats work, even if they are a table-for-presentation-like hack, and it would add more code to your CSS file to do this. It would, however, allow you to get around a lot of the other hackish techniques for dealing with faux-columns. Serve browsers that don't do display: table, etc, their equivalent without the extra hacks, a la Progressive Enhancement.

By: Adam Messinger

Adam Messinger — Thu, 28 May 2009 14:32:25 +0000

@Alan Bristow: With Textpattern, getting CSS out of the db and onto the filesystem is an essential performance tweak. The db-based CSS only really exists as a legacy feature at this point, and using it isn’t recommended. The rvm_css plugin looks like an interesting approach, and I’ll have to give it a closer look. Thanks for the tip.

As for float clearing, I tend to use overflow: hidden unless it causes clipping problems. Otherwise, floating the container also works. Neither is particularly elegant, but both are broadly compatible.

By: Evan

Evan — Thu, 28 May 2009 14:15:29 +0000

I solve a lot of this using display: inline-block and margins instead of floats — I find it leaves me with cleaner CSS (mostly) and I don’t have to float everything, which I’ve always felt makes a design “fragile” and prone to breakage (and also as much a misappropriation of the functionality of floats as table-based layouts are of tables).

It does, however, leave Firefox 2 users completely out in the cold.

By: Alan Bristow

Alan Bristow — Thu, 28 May 2009 14:12:59 +0000

I recently had flashing problems on a site. It was Textpatten based and my problem was mainly my reliance on db reads for the CSS when it can be made static via a simple plugin. Results were instant and the cure was complete. Plugin was, rvm_css (it’s in the Googles).

Gonna look at :after too tho’.

By: Jeffrey Zeldman

Jeffrey Zeldman — Thu, 28 May 2009 14:01:23 +0000

@AlanW: I thought it was funny. And clever. And it’s true that we’re making do with float, because CSS initially offered no means of designing multiple columns. In other words, float is a hack like table layouts were a hack. But I’ll take semantic markup and floating divs over fat pages of non-semantic cruft (i.e. table layouts) any day. As to the notion that table layouts are more accessible, poppycock. CSS layout offers a control of source order that is infinitely friendlier to users of tools like JAWS; and navigating via H2 and H3 headlines is the same to the JAWS user whether the page was laid out with DIV or TD.

By: AlanW

AlanW — Thu, 28 May 2009 13:34:37 +0000

@Jeffrey I’d love it if you’d weigh in on Matt’s comment regarding using tables for layout and the semantics of floats.

By: Olly

Olly — Tue, 26 May 2009 11:16:20 +0000

@Jeff – You can trigger hasLayout in IE6, which has a similar effect. The easiest way I’ve found is to set a dimension on the box, e.g. height: 1%;

By: Jeff

Jeff — Tue, 26 May 2009 10:10:10 +0000

Correct me if I’m wrong, after doesn’t work on IE 6 ?
That would be the only drawback; whether we have reach reach the point where we can ignore ie 6 is another talk though…

By: Michael Kozakewich

Michael Kozakewich — Tue, 26 May 2009 00:39:32 +0000

Neal G:”…but I have a feeling you’re stats for this site have IE6 around 3-5%”
3-5% is far too high a number. I’m sure Chrome, Opera, and All-Other-Browsers each take up less than 10% of his visitors.

I don’t seem to be well-versed in floats; I thought the :after trick was the newest clearing method.
Is there any specific reason not to use that?
Also, is there a specific resource somewhere which lays out every clearing method, with the pros and cons of each? It sounds like there are a tremendous number.