MikePadgett.com

Update 21/02/2007:

Getting this problem?

PIE Clearfix works fine in IE7 like this:

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Now simply add:

class="clearfix"

… to the outer div. For the sake of neat markup, you could also just incorporate the above code into your existing rules and/or classes.

Let me finally remind readers in this update that I take absolutely no credit for this clever fix. I wrote my article because it took me a painfully long time to find the original PIE article and I’d hoped that it might just take a few more people to connect the cables and light up the Christmas tree! If you’re here, it worked!

It was hard to find because it’s hard to describe the problem except in the most generic - and therefore most Google-unfriendly - search terms. As a result, I’ve also seen this issue described as “nested div float problems”, “clearing nested floats” and simply “container div won’t float”.

The original article below has more than mere archive value. There are other hacks too, some devastatingly simple, but clearfix is still the one I use almost two years on. It’s something dependable and rock solid in these twilight times for backwards compatibility!

Original article:

I reported some time ago on the clearfix hack: the kludgy solution to nested DIV float problems.

Since then, I went on to make liberal use of this little gem.

As you do, I stumbled across a sickeningly simple alternative today, whilst looking for a solution to a Safari float problem.

This latest wonder is from CSS nut Paul O’Brien, and apparently it’s been around for some time, if fifyfoureleven.com’s report is anything to go by.

Here’s the problem again:

The solution is simply to add overflow:auto to the outer div.

Here’s the before, and here’s the after. Now I haven’t really tested this yet, but these examples seem to suggest that all is definitely well.

My colleague John Goodall said he’d read that the PIE Clearfix solution wouldn’t work in IE7. I haven’t found the item he saw as yet, and it shouldn’t be an issue if IE7 does support (as they say it will) the :after pseudo-selector.

Well, even if PIE Clearfix does break in IE7, here’s a drastically simpler alternative!

ven Jakob Nielsen thinks it’s a good idea to customise a website for Christmas, because as he dryly puts it, site owners need to respect users as human beings.

In these templated times, it’s one of those special moments where the fuddy duddy stakeholders momentarily feel festive towards web designers, in the spirit of giving if you will, and let them loose on the Christmas decorations for the website.

So the web designers go off all roasy-cheeked and press their nose against the Fireworks or Photoshop GUI like a kid looking covetously through the frosted shop window at a potential windfall from Santa.

My company’s seasonal Intranet header, courtesy of me

Today, there are but 12 days to go until Christmas. With one eye on the partridge in the pear tree and the other on some major dot coms, I went in search of a bit of customisation. I was surprised by what I found.

If brands got together for a Christmas works do, the monoliths such as IBM, Microsoft, Coca Cola and General Motors would be more interested in sulking in a cobwebbed corner with a cup of tea like a teetotal Calvinist grandfather. They’d be the first to call everyone back to the office because profit opportunity was being wasted. At the time of writing, no sprinkles of the white stuff topped any of their letterheads.

Coca Cola I could have expected more of. After all, it was one of the company’s first grandly intrusive marketing tricks that made Santa red. But other consumer brands were equally stony. McDonalds, a business that has famously neglected its web presence over the years, showed no signs of the impending festivities. High Street giants HMV, Virgin and Dixons were similarly lacklustre and the ubercool of mobile phone visual identities kept Vodafone and Orange’s contributions muted.

It’s the web-based brands that lead the way. Google hasn’t shown up to the Christmas party just yet, but the world’s most famous search engine practically invented the practice of celebratory modification, so in the tradition of fashionable tardiness, some representation of the glorious and the gaudy will surely turn up soon. Yahoo! has already made its foray and Amazon has turned over its navbar to some pleasantly snowy decals.

Change is finally happening over at macromedia.com, with the Adobe visual identity steadily (if clumsily) getting to grips with the Macromedia site structure.

It remains to be seen whether Macromedia’s traditionally rather tasty approach to layouts will carry over into the somewhat more monolithic Black, Red and White id at Adobe.

Macromedia’s design aesthetic was different, occasionally pioneering, and always a strong influence on other projects. You didn’t see a lot of curved corners before the 2004 edition!

As my salute to the brand that showed us that corporate websites could be sexy, let’s look back at a few screenshots of the Macromedia site through the years:

This item is a follow-on really from a statement I made in my previous article about User Experience 2005: how we are web designers rather than artists.

J recently pointed out to me a website she’s been looking at called Heavy Backpack. It’s billed by its makers as a “Creative Catalogue” - in other words a mini portfolio for each of its contributors and there are some outstanding examples of graphic design in there with the usual derivative stuff.

Heavy Backpack

But the site itself is what interested me first. It looks attractive, along similar lines as K10K or any number of those horrible awards sites that all present us with a cutting edge mostly made out of Flash.

Now, of course I realise that the right way to do this kind of magazine (or catalogue or whatever) site is to mute your design so as to let the content do the talking, but being a person interested in the details, I couldn’t help but notice as the site slowly loaded that there were so many images on the page.

My interest was piqued and I dived right into the source code to see what efforts had been made.

Few. 27 validation errors in HTML 4.01 Loose. A cherry pick of the accessibility issues includes those perennial favourites tiny type, iframes and almost no alt attributes.

The team that put Heavy Backpack together is Wade Studios, an Australian business with a good client list. Very talented graphic designers, clearly, but as web designers they ain’t.

In the last year, I have become increasingly convinced that to call yourself a web designer today means that you are a proficient XHTML/CSS coder, a standards evangelist and well-versed in usability and accessibility best practices. So says Zeldman, so says O’Shea and all that lot, so says Nielsen, and so say I. A graphic designer is not a web designer.

Quote:

“Too many graphic designers have tried to force the Web to be what it is not, in the process creating ineffective and sometimes unusable websites. Quality web design is driven by information architecture design principles. Graphic design should support these principles.” - Gerry McGovern

Graphic design houses ignored the Internet. It was low culture for a long time and there was no money in it. But today, interactive projects can rival those in other media in scale and value and now these same graphic design houses are selling their web capabilities where they can’t get through the door on the back of print alone.

But in truth, the fuddy old Art Directors don’t understand websites. Just as some design houses tried to stay aloof when DTP was adopted by all walks of employee (even though the product was crap, it was certainly cheap) they also missed the boat with the Internet.

Hence why the code is neanderthal, or worse, art program-generated.

Hence also why it’s pretty but without practicality.

[See also: Design Choices Can Cripple A Website by Nick Usborne, 08/11/2005 A List Apart]