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 div
s 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
- An Objective Look at Table Based vs. CSS Based Design
- Exploring the Limits of CSS Layout
- TILT: How to Stop Feeling Bad About Using Tables for Layout and Start Enjoying Your Markup
- 3 Column Layouts – A Different Approach
- A simple introduction to 3 column layouts
- Elastic fantastic, or…
- Flexible Layouts with CSS Positioning
- Faux Borders and Pseudo Table Effect