Div Mania

Gez Lemon explains how to avoid Div Mania – overuse of div elements – with the help of CSS 2.1 selectors.

Like Gez, I’ve seen plenty of sites that just replace the old table-tag-soup with myriads of div and span elements instead of using the semantically correct elements for the task. Not much better than hanging on to the old-school presentational markup.

Posted on June 3, 2005 in CSS, Quicklinks

Comments

  1. One Czech example of the (almost) semantic-only layout from last year: http://klient.plavacek.net/div/

    BTW if the IE crap supported siblings or :after/before pseudos, we could drop many neutral blocks, but the reality is different :(

  2. Yes, DIV elements have been overused so much. I’ve also been trying to make my website DIV free, but due to “certain limitations”, I was forced to use them in two occasions.

    And that Czech website could be totally DIV free if it used the BODY element as a container. Too bad a lot of people still don’t know that the HTML element can also be styled.

  3. Jero: I don’t think “div-free” is necessarily an ideal to be aimed for. I’ve found divs useful to contain related elements on pages, much like the fieldset element does in forms.

    It’s the only element we have to do that until comes along in XHTML 2.0.

  4. The difference between the FIELDSET and DIV element is that the FIELDSET element has some semantic value and make the form more usable. DIVs do not. It’s only used to wrap some content together to style it with CSS. But as Jan said, if IE supported the adjacent sibling selector(s) (and every other CSS2 selectors of course), we would be able to use it to group certain related elements on a page with CSS and style it.

  5. Divlessness is not a virtue.

    Misuse of divs (or any other element) is a vice.

    That’s my take. The discussion is ongoing at juicystudio.

  6. [2] Jero, IE has slight problems when using HTML and BODY elements for styling - both can’t have assigned image background at once and body can’t have constrained width.

  7. I was thinking the same thing, when I did a view source over at the much hyped Capgemini redesign. My handy DOM Inspector showed DIVs nested 8 deep! Why is DIV/SPAN so much better than TABLE/TD? Yes of course there’s the semantic aspect of it, which I agree with completely; but from a code cleanliness and manageability point of view, I see no difference.

  8. You’re absolutely right. And Gez Lemon’s article is just what beginners need. But as a beginner, I’d just like to say that div-itis might not be so terrible, in the long view. Most people make that mistake when they’re transitioning from old markup habits to CSS. We’re still thinking in tables. But we’re trying. If you’re seeing a lot of sites with this, then that could mean there are a lot of us trying.

  9. June 4, 2005 by Roger Johansson (Author comment)

    Michael: Avoiding tables for layout enables screen reader users to listen to a web page without being interrupted by things like “Table with one column and thirty-two rows” and “Table end”.

    Kathy: Yes, that’s probably the case for some sites. But I’m afraid that in many cases it means that the web developer is just using the default templates of whichever CMS the client has decided on. And if they use those templates to learn CSS layout from, they are bound to end up with even more divitis and classitis when building new templates.

  10. I commented about this over at the original juicystudio post. Glad to see some interest in this.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.