aPaddedCell Article - Div-itis: What it is and How to Avoid it
Article summary:
Quote: When they start designing with CSS instead of tables, many web designers fall into the same trap. Instead of putting tables around everything on a page, they use divs instead. The underlying design practices remain largely unchanged. This article will explain the problems with these habits and propose some practical solutions.
Here is the link:
http://www.apaddedcell.com/div-itis
Post any questions or comments here.
Suzanne posted this at 03:35 — 15th September 2007.
She has: 5,507 posts
Joined: Feb 2000
I was just going over this with my dad (who is moving into using Dreamweaver from GoLive).
I do like to use DIVs for sections that aren't necessarily delineated by headings. Great summary!
JeevesBond posted this at 05:53 — 15th September 2007.
He has: 3,956 posts
Joined: Jun 2002
Hi Suzanne, good to see you again!
Having looked at the code of our own articles site (apaddedcell - where that was published) it does indeed suffer from div-itis! I should investigate completely re-writing the templates for that site, but it wont be until after we've moved the forums.
a Padded Cell our articles site!
Abhishek Reddy posted this at 17:05 — 15th September 2007.
He has: 3,348 posts
Joined: Jul 2001
Great article. Even though I'm cautious about general tag noise, I think I suffer from div-itis sometimes when I use div tags for rapidly prototyping layouts, and neglect to reduce it later. Navigation lists is a classic example. You've encouraged me to fix the problem on at least one layout already.
Nice to see Suzanne again, too!
webwiz posted this at 01:36 — 16th September 2007.
He has: 629 posts
Joined: May 2007
Nice article, Megan. Thanks.
I'm not sure I completely agree with that. A DIV is semantically neutral, as is a SPAN. What's more, you could arguably make the HTML more semantic by adding meaningful class names, as for microformats.
That does not invalidate your arguments, though.
Sadly, IE sometimes does require an extra DIV for the layout to work. I use this to advantage, sometimes, by putting a conditional comment around the opening and closing DIV tags, like this:
In CSS, I can target IE using this as a selector, e.g.
#for-msie #nav a {zoom: 1;}
Similarly, I can detect IE in JavaScript:
var isIE = !!document.getElementByTagName('for-msie');
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Megan posted this at 13:15 — 16th September 2007.
She has: 11,421 posts
Joined: Jun 1999
A div does have semantic meaning - as I explained, it's a division, a section, a bunch of stuff that goes together. What I was saying is that over-using them when you don't need to often removes the semantic meaning. Then you are just using it as a empty tag. A div does not have meaning when it's not being used for it's right purpose: to define a section. Microformats would be different because in those cases you are defining a meaningful section.
To me, a tag being "neutral" is basically the same as it not having meaning at all. If it doesn't have meaning then it doesn't have meaning.
So, you're using conditional comments to put in a div tag but you're not using them to serve a different CSS file? I know some people do things like that because they don't like to have CSS in two different places. But I haven't seen it done this way before - people are more likely to use traditional CSS hacks in that case. I'm starting to think about just serving an ie-only CSS file as part of my template. Right now I'm just putting it into the as needed.
Megan
Connect with us on Facebook!
Renegade posted this at 20:46 — 16th September 2007.
He has: 3,022 posts
Joined: Oct 2002
Great article there Megan. I must admit, I do suffer from DIV-itis sometimes although I am trying to cut down on it.
Just a question though, in the last bullet point:
Was it meant to be "Is it worth creating..." as opposed to "It is worth creating..."?
Welcome back Suzanne! So nice to see you round again
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.