Don’t use "Divs for layout" please

Sep 11, 2006 • Emil Stenström • CSS

Proud people all over the world show their new sites and proudly proclaim: "I used divs for layout!"

There's a problem with the above. Every time someone uses the phrase "Divs for layout" they spread the misconception that divs are some special kind of element. Beginners are tricked into thinking that everything you add to a page should be in a div. I've seen great looking pages filled with; you guessed right, only divs.

Some would say that these types of sites actually are worse than table sites. I don't agree. If you look at it in a wider perspective these people at least are on the right track. They are slowly learning and I as I've tried to convey earlier I think it's ok to start out bad and gradually improve.

So, why is it so bad using only divs? Because the idea of HTML is to convey structure. What structure does your content have? Are some parts more important than others? Are you using lists, but not the list element? Find the tags that best fit your particular purpose. There's lots of elements out there. Any good front-end web developer should know (almost) all of them.

Now, could we please stop using the phrase "Divs for layout"? If you want an alternative I would say "CSS for layout". Spread the word my friends!

Comments

Sep 11, 2006
By: Nate (#1)

I would agree. It does spread some misconception. In many cases, someone just learning CSS may struggle to understand, and by adding divs all over the place simply re-creates the problem they had with tables. The structure is still lacking, the code bloat is still there, and there is no real understanding of css and positioning.

Using CSS would be much better than 'divs for layout'.
Sep 12, 2006
By: exe (#2)

I can't do anything else than agree and can't see how someone could not do so.

I also think that people should stop calling HTML a "programming language", but that's another topic...
Sep 12, 2006
By: Flack (#3)

It had been told too many times already.
Only the powerful time will cure these beginners.
Sep 12, 2006
By: Jens Wedin (#4)

Mayby?

Proud to use (x)html for structure and css for layout (design). :)
Sep 12, 2006
By: jenn.suz.hoy (#5)

I love how every says "beginners" when talking about tables for layout or divs for layout. It's not exclusive to beginners, but to those who have been in the industry from a time when tables were the way web sites were structured.

The web is still a new enough environment where even the most seasoned designer and developer is learning something new every day (or should be), and those who are experts are a grade or two above the rest, instead of drastic leaps and bounds.

When it comes to web standards for structure and development, we're all still learning best practices. In 5 years, who's to say that CSS won't be passed up for something else that makes our markup cleaner, more precise, and faster to load?
Sep 12, 2006
By: Emil Stenström (#6)

@jenn.suz.hoy: I say beginners in the sense "people that don't know much about web standards". The same way I would call myself a beginner pizza maker, I don't know anything about making a real pizza.
Sep 12, 2006
By: Ben Millard (#7)

A non-CSS styling system would need decades to get devised, designed, agreed upon and implemented into mainstream browsers. :)

CSS3 selectors should go some way towards reducing the amount of <div>s and classes present in our markup. There's lots of other CSS developments which will make semantic HTML documents easier to style more efficiently, too.

But we'll need some <div>s and classes in there for several years, until CSS3 selectors gain mainstream support in the browsers most people are using. But there's so many structural elements that you don't need many even now.
Sep 18, 2006
By: Johan (#8)

divs are DIVIDERS to provide sections to our HTML markup. These sections group certain elements in that div which is the container for these elements.

Though extra wrapper DIVS are used to make layouts work as intended.
Sep 19, 2006
By: Elliot Swan (#9)

Yeah, I always cringe when I hear somebody say that.

I find that sometimes newly converted developers will actually code as though they are using tables, but they just use div tags instead of tr/td tags.

Eventually they'll get it.
Sep 23, 2006
By: Jasper (#10)

Very well said mate. Been reading your site for half an hour already... :)
Sep 23, 2006
By: Dustin (#11)

Very good advice. I remember having a php textbook in a class, and it specifically taught you how to cut up tables to display your site properly. I've been looking for a better way to do that ever since, and CSS is clearly it. Thanks for helping me not make such a classic beginner mistake!
Sep 24, 2006
By: Emil Stenström (#12)

@Elliot Swan: I really hope so, thanks for your comment.

@Jasper, Dustin: Thanks! The intention of this site is to try to tell people what I know. Glad to hear some of it is getting through :)
Nov 26, 2006
By: Jeff (#13)

I've tried using DIVs for layouts and seem to have more problems with it than its worth. Why are DIVs considered so much superior... especially when dealing with cms templates for example where dynamic content can really mess up alignment etc?
Nov 26, 2006
By: Emil Stenström (#14)

@Jeff: CSS is very different from using tables. Perhaps you could read an article I wrote about it? Guide to CSS and standards explains the thinking behind it; it's not just another technology, it's another way of thinking about websites.
Dec 7, 2006
By: fan-tiger (#15)

I agree with combining html with css as a powerful layout manner. But please: don´t combine just divs with css. You get much more effects if You remember the style option.I also agree in the meaning of "There´s lots of elements out there". Although You noticed to open mind for the comunication, at Your own page You still prefer the using of div, instead using frames or tables. Is there any specific reason for Your code choice?
Dec 13, 2006
By: Dan Edwards (#16)

Hmm, tricky call this one, as its a fine line. Whilst I remain neutral on the use of tables, I still believe that divs are the way forward.

What MUST be educated to new CSS ers is that it is all to easy to fall into 'divitis' and this is what causes the problems. (divs within divs are almost as bad as nested tables).

DO encourage the use of DIVs - DON'T fall into 'divitis'
Dec 13, 2006
By: Emil Stenström (#17)

@Dan Edwards: I completely agree and you put it in a much better way than I do. It's a fine line.
Apr 7, 2007
By: Anders M.J. (#18)

@fan-tiger
I don't agree with you on using the style function (I presume you mean using the HTML style attribute). It's almost the same as using the font tag: you must edit multiple lines if you want to change something.

I'd make a class instead and call it with the span tag.
May 12, 2009
By: Mark Stewart (#19)

HTML is content driven! A DIV only page is rather drab from a code perspective, we all somewhat agree. Let's get more specific - with specificity! Thing with CSS and ALL the proprietary browser crapolla out there is they make it easy for beginners to cower into DIV-only design. Nothing works the way it should in a textbook. Make it dirt simple and simplify it until it eventually goes from flickering mouse-over to ... where'd that page go? Synchronize tables and lists, ladle factory resets into contemporaneous packages - and you've got a learning curve happening!

Comments

By: Nate (#1)

By: exe (#2)

By: Flack (#3)

By: Jens Wedin (#4)

By: jenn.suz.hoy (#5)

By: Emil Stenström (#6)

By: Ben Millard (#7)

By: Johan (#8)

By: Elliot Swan (#9)

By: Jasper (#10)

By: Dustin (#11)

By: Emil Stenström (#12)

By: Jeff (#13)

By: Emil Stenström (#14)

By: fan-tiger (#15)

By: Dan Edwards (#16)

By: Emil Stenström (#17)

By: Anders M.J. (#18)

By: Mark Stewart (#19)