{"id":103,"date":"2005-06-15T15:57:20","date_gmt":"2005-06-15T13:57:20","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/06\/15\/nested-divs-are-not-evil\/"},"modified":"2008-01-01T10:27:08","modified_gmt":"2008-01-01T08:27:08","slug":"nested-divs-are-not-evil","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/06\/15\/nested-divs-are-not-evil\/","title":{"rendered":"Nested divs are not evil"},"content":{"rendered":"

Quite often I run to a discussion about how nowadays developers use nested div<\/code> elements to replace tables. These words mostly come from boring guys who\u2019s only worry is to criticize other people\u2019s work. Well, if you\u2019re one of those, please don\u2019t do that.<\/p>\n

Why are tables bad for layout in the first place?<\/h3>\n

Apart from being non-semantic, which by itself is nothing to be overly bothered with, the main flaw of using tables for layout is that the content remains within table grid even when unstyled. This restricts comfortable usage in many alternative devices, such as Braille readers and PDAs and that is an accessibility issue. By applying content grid with CSS positioning, we ensure linear flow of the content no matter what.<\/p>\n

On divs<\/h3>\n

Used to have a full grid control, designers and developers are often pushed to use nested divisions. From the perspective of orthodox mark-up purists it\u2019s a disaster, but for some people nothing is good enough nor ever will be. For the rest of us who are down here in the trenches and do web sites for a living, there\u2019s a perfectly legible excuse for using nested div<\/code>s when ther\u2019s no other option. The W3C<\/a> itself says about divisions<\/a>:<\/p>\n

\n

\u201cThe div element, in conjunction with the id and class attributes, offers a generic mechanism for adding extra structure to documents. This element defines no presentational idioms on the content. Thus, authors may use this element in conjunction with style sheets, the xml:lang attribute, etc., to tailor XHTML to their own needs and tastes.\u201d<\/p>\n<\/blockquote>\n

Pay attention to \u201cto tailor XHTML to their own needs and tastes\u201d<\/cite> part. And even though nesting too many div<\/code> elements leads to increased file size, it will render properly in alternative devices and as such is not accessibility threat.<\/p>\n

If a broken browser requires a wrapper or two to render web page properly then you should go for it. Remember, users are always in the first place and quasi-purism will not feed your kids.<\/p>\n

Related reading<\/h3>\n