In his book, Transcending CSS: The Fine Art of Web Design, author Andy Clarke argues in favor of content-out markup. This approach centers around defining the content on the page in a semantic way that makes sense to those using browsers without style information. The base XHTML should be as free of layout coding as possible, even to the point of following a different flow. Then, CSS should be used to create the layout on top of it, using absolute positioning to break the XHTML elements from their flow as necessary.

That CSS should be the predominant source for layout and other style information is undeniable; I agree with Clarke wholeheartedly. Where I think he errs is his abandonment of floats for absolute positioning. While acknowledging that floats are, “almost a de facto standard method for creating column layouts using CSS,” he argues that they are too fragile. He’s right, of course; floats can unintentionally clear when they’re not supposed to because they happen to be one pixel too wide. “Whereas float-dependent layouts can easily fall apart at the slightest nudge,” Clarke asserts, “positioned layouts can support supersized images or gigantic text without failing.”

Up to the point I read that, I was convinced. However, Clarke’s example later in the book demonstrates a failing in his logic. In his “Cookr!” design, he uses a technique called Inman position clearing to place a footer beneath the primary content. For those unfamiliar with it, the important thing to note is that Inman position clearing uses JavaScript to clear the footer.

I’m not debating the effectiveness of Inman position clearing; I’ve honestly never used it. For all I know, it could be compatible in every browser on the market and widely accepted as standard by the design community at large. My gripe is that we’re trying to promote the division of content, design, and interaction. Clarke’s method separates content from design, only to go back and mix design with interaction. It’s self-defeating. A simple “clear:both” would accomplish the same task in a float-based layout. No JavaScript, just CSS, the way layout code should be.

This dependency alone makes me question the original argument. Float-based layouts are prone to falling apart when their content exceeds width limitations, while position-based layouts are not. Furthermore, float-based layouts must conform to a source order resembling the layout order, while position-based layouts have no such requirement.

It’s clearly a trade-off. If we stick to floats for layout, we must be cautious to restrict content width accordingly. This requires added diligence, but, given the proliferation of float-based layouts on the internet, I think people have readily accepted the challenge. Besides, if we have “supersized images or gigantic text” on our pages, the fact that they are breaking our design only adds insult to injury; we’re going to want to correct the problem whether the design fails gracefully or not.

Likewise, is there much harm in requiring the order of content and layout to be the same? I’d argue that, nine times out of ten, the order of layout is the most logical order anyway, so there’s rarely a need for content order to be any different. Point in fact, Clarke’s example does just that, and would have worked just fine as a float-based layout (arguably better, in fact, because it wouldn’t have to use JavaScript for layout purposes).

I’m not trying to be pretentious; I know I’m not half the designer Clarke is. However, much as I’ve learned from his book, I don’t think I’m ready to abandon float-based layouts just yet. Every approach to web design has its strengths and weaknesses. In this case, however, I don’t find Clarke’s arguments in favor of position-based layouts all that convincing.

7 thoughts on “Float vs Position in Layout: My Gripe with Andy Clarke

  1. I am currently reading the book and I found this article very interesting. You make a good point in how the technique could be seen as contradiction. I’m actually on the “Cookr!” example too. What got me to Googlin’ is that I have no idea what I’m looking at… Is Mr. Inman’s technique JavaScript or CSS? I just see a lot of slashes and asterisks. What is frustrating is that Mr. Clarke assumes the reader is familiar with all this. Also, I’m confused with where the author stands with the discovery process. First he’s against static mock-ups because (paraphrasing) one cannot get the idea of interaction of a website from a static image, and then he goes ahead and bases all the examples on the static Cookr! mock… Confusing.

  2. Inman position clearing appears to be a combination of CSS and JavaScript, Jason. You can find more about it on Shaun Inman’s website. I have a feeling that Andy omitted the JavaScript code itself because it would’ve taken up several pages and added little value.

    I could be mistaken, but I think Andy uses the term “static” in the design context to refer to an image rather than an (X)HTML/CSS web page. The latter, into which his Cookr! mockup seems to fall, is dynamic in the sense that elements can be clicked and styles can be changed on the fly to suit the whims of clients early on in the process.

    Overall, I agree with you; the book has some confusing elements. My take is that Andy is more of a theoretical designer than a practical one. The talk early on about designing for cutting-edge browsers and the chapter on CSS3 should be proof enough of that. However, I did learn some very useful things reading the book (e.g., using position:relative to establish a positioning context is true gold). All in all, he knows what he’s talking about, but I don’t think all of it is useful for most day-to-day web design.

  3. I can’t stand Andy Clarke. I find his book to be completely pretentious. He’s so full of himself and his idea of web design. I find the ideas in his book to be worthless. No business is going to want 5 different websites. Why pay this pretentious douche extra for various web designs? A business could save money and just have one design that works on all browsers. Especially, when the majority of users are using Internet Explorer. He’s whole argument is not applicable. What makes him the ideal of CSS design? Why is he so innovative? All he is doing is finding more complicated ways to do simple CSS.

  4. I see your point, Eric. I believe Andy approaches things more as an artist and an innovator than as a practical web designer. This isn’t altogether bad; I think every field needs people like him to push forward. You’re entirely right, though; he seems to lose sight of the day-to-day work of web design in favor of his grand vision of the future. It’s a balance we all have to strike, and he’s way off to one side of it.

  5. Great article. I’m just learning CSS and I’m trying to figure out when to use float or absolute or relative positioning. I had no idea what the standard is for 3-column sites. Your article clears some of that up. Thanks.

  6. I’m totally confused. I just struggled through a CSS text by Richard York, then had this book of Andy’s dropped in my lap as the next part of the course.

    Of course, I’m in Chapter 2 trying to make sense of the dribs & drabs of code scattered throughout the chapter. I find it very difficult to follow the “flow”. Give me a task, say: “take this and this and this – and build this” and I can get it done. This is a massive head pound on a stone wall.

    Add my eye prescription to the mix, and what a hoot. I need my bifocals to read the book, then need them off to view the computer screen.

    This makes as much sense as putting all the bits of code on separate index cards, putting them all in a box, shaking it up, then dumping it on the table to assemble the finished product.

    I’ve got a decent collection of wood working tools, and can follow a schematic and build some decent looking stuff. I couldn’t do it like this book puts a web page together.

    I also love baking. But with this demo bakery website, can you imagine making bread or cakes the same way the website was done?

    oh well, back to the wall and find a spot without any dents.

    John

  7. I really liked Transcending CSS until I arrived at the Cookr example. I haven’t found any content downloads for this example as of yet? Has anyone found this?

    I agree that fixed positioning has it’s place but the landscape has changed considerably since this book was published.

    Anyway I’m finding the tutorial examples a little disjointed like a lot of other books.

    Thanks for this article.

Leave a Reply

Your email address will not be published. Required fields are marked *