Nested divs are not evil

Quite often I run to a discussion about how nowadays developers use nested div elements to replace tables. These words mostly come from boring guys who’s only worry is to criticize other people’s work. Well, if you’re one of those, please don’t do that.

Why are tables bad for layout in the first place?

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.

On divs

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’s 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’s a perfectly legible excuse for using nested divs when ther’s no other option. The W3C itself says about divisions:

“The 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.”

Pay attention to “to tailor XHTML to their own needs and tastes” part. And even though nesting too many div elements leads to increased file size, it will render properly in alternative devices and as such is not accessibility threat.

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.

Related reading

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?