Floats, clears, and color flashes

After viewing this site’s redesign in progress, Peter Petrus wrote:

[Y]ou’re using footer to clear floats (content + sidebar). This creates a large drawback, because before footer is downloaded and displayed in the browser, parent wrapper lacks any background.

It means that we’re staring on black text / orange background combo for a few moments. Well, few moments now, but should you put any unresponsive widgets in the sidebar, everything can render much slower. Having main content flash like this isn’t very pleasant – especially when you named the redesign “Designing from the content out”.

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.

I’d read about using “:after” clearing but hadn’t implemented it and thought I could solve the problem an easier way. This afternoon, with about five minutes’ work, I did so.

I solved the orange background flash by moving the faux column background image up in the CSS hierarchy.

  • In the original CSS, I used the faux column background image on the wrapper element only.
  • In the updated CSS, I’ve now added the same background image to the body element as well.

Doing so fixed the orange background flash problem, because the browser no longer has to wait for the footer to clear before showing the background image.

Compare body element on new z.css and previous z-bak.css. (Likewise, compare body on alt.css and alt-bak.css.)

[tags]css, workarounds, clear, float[/tags]

37 thoughts on “Floats, clears, and color flashes

  1. This reminds me of the good ol’ days of CSS discovery, where there was always someone finding a new way to push the boundaries of what the language could do.

    Although this time, we’re polishing the tools in our bag of tricks instead of adding new ones. Thanks for the post.

  2. One problem with assigning a fixed-width, hard-edged background image to the body element on a horizontally-centered design is that 50% of the time it will be 1 pixel off. Try slowly resizing your new site design to see it in action. The right-hand border gets thicker and thinner.

    A minor point, but for the more pixel-anal, it’s good to know.

    (By the way, some of us have email addresses with four-character domain extensions, which your validation does not allow!)

  3. I’m a pixel freak – and there’s a tiny 1px issue on some browsers when setting a centered background image on the body tag.

    From “One pixel background jog”: On odd pixel widths where the number of pixels isn’t exactly divisible by 2 the browser has to round up or down to arrive at its measurement and IE seems to round the elements placed on the body at a different rate to those placed on other elements.”

    Apparently, this happens in Safari as well.

    In your case, the right side of the container sometimes gets a 2px black line – because you are also setting the bckground on the container and the two images overlap.

    I’d say go with the :after fix – it’s acutally a decent way to clear floats.

  4. (By the way, some of us have email addresses with four-character domain extensions, which your validation does not allow!)

    @Derek: I thought we’d fixed that. Sorry about that.

    the right side of the container sometimes gets a 2px black line – because you are also setting the bckground on the container and the two images overlap. I’d say go with the :after fix – it’s acutally a decent way to clear floats.

    Fair enough, @Dinis.

  5. Travis said:

    Why not use overflow:auto; on the wrapping element? One line of css, less obtrusive than :after

    Travis wins! Test 3, with overflow avoids pixel jog in IE (and sometimes Safari) while removing orange flash.

    Brilliant, Travis. And so simple. Thanks.

  6. Can someone elaborate on what, if any, is the advantage of using overflow:auto instead of overflow:hidden ? I have always used hidden for clearing floats, or the :after method. If I remember correctly, overflow:auto can trigger scrollbars in FF1 (do we care? probably not much.), but I haven’t run into any bugs with using the overflow:hidden method.

  7. Oh, heaven forbid, a page isn’t completely loaded until it is loaded. Who knows what will happen next? Video that isn’t buffered not playing? We’re all damned to 56k!

  8. The :after method is a pretty old, and outdated. I can’t believe people even recommend using it anymore. Anyway, props to Travis for pointing out overflow: auto, which is what I swear by now days.

    Jeffrey, another way to fix the 1px jog, (other than making your site an even numbered width, which in the end will save you grief) is to give your odd numbered DIV a 1px transparent border on the left or right like so: div { border-left: 1px solid transparent; } This won’t work in IE6 as it doesn’t support transparent but I have a feeling you’re stats for this site have IE6 around 3-5%

  9. Using ‘overflow’ to clear floats is a clever way too, but it breaks text selection and creates problems in Firefox (especially ‘auto’).

    Thanks for addressing this issue, Jeffrey, looking forward to reading your articles in the new design. :)

    Oh, and sorry for my bad English.

  10. There’s another, really ingenious layout technique for this that’s being pioneered at sites like Google and Flickr: they’re taking advantage of the table element’s native support for displaying content in columns. 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.

    Another advantage of this new technique is that your layout can degrade much more gracefully when you have content that’s too wide for the new format (usually a large image or a particularly long URL). Since the visual elements are being applied directly to each column, background images and the like will actually grow with the content. This behavior is really pretty robust, and as far as I’ve seen, these sites are virtually free of the unsightly content overlaps and cutoffs that plague so many float-based layouts.

    Most importantly, the corresponding CSS is much more accessible to users with screen readers. Semantically, the concept of a floating element was introduced to describe optional, supporting information that appears alongside the main content. But most sites incorrectly use floating elements for every area of the page, which means that the screen reader doesn’t know which parts to emphasize and which parts it can safely skip past. In contrast, a table-based solution allows the screen reader to clearly communicate both the content and the layout of your site to your disabled audience.

  11. overflow may contain floats effectively, but it introduces some errors. There is no easy floating without knowing all that clearing methods.

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

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

  14. @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%;

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

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

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

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

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

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

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

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

Comments are closed.