Smashing Magazine - we smash you with the information that will make your life easier. really.

Nice Overview Geir…. Some of them are really useful… Thanks for sharing !!

DKumar M.

Nice tutorial, Thanks a lot for sharing

I think there is not much complexity in using Divs.
You can go for 960 grid systems and Css tables in the future.
The problems lies in ones experience with them

Excellent information, very informative
thx
Larson

Great article, very thorough and balanced. @Fake Name, Assuming you mean how do you center a div – set a width and then ‘margin:0 auto;’ in your stylesheet, easy.

That helps a lot since I am not a code developer, just a graphics designer. Sometimes hacking blog themes has been hard not knowing much about the code. I learned by trial and error, so this post is quite informative for me. Thanks guys!

As an aside (off topic), if you are looking for ideas for new posts, what would be helpful to many including myself, is to give advise to beginner and intermediate job seekers in the field of web design. Where to look for a designer job, which sites are best to list your design services, create a rating of sites like eLance for example. And plenty of advise for after college designers with little to no experience, how to build a portfolio to get that dream job.
It would be nice to explore the possibilities of getting a job via internet.
Thanks!

This is not a tutorial.. it’s almost a book! :-) :-) :-)

Great text. Congratulations.

Great article Thank you.

Finally something I can send to my friends who still use tables. CSS Tabes are no better than tables for layout. Instead of table code you have a bunch of different divs to represent rows and cells. Bleh!

If anyone needs help figuring out which tag to use for which content (semantics) check out this HTML Elements Best Practice sheet -> http://keryx.se/resources/html-elements.xhtml

Follow kingkool68 on Twitter!

Geir:

Appreciate this overview.

For developers who need to conform to *very* strict WCAG guidelines (such as sequencing of the Hx head tags), DIVs are an alluring way to outline information in ways that allude conformance tests, as is the use of tags such as P for what should be Hx heads.

Your article helps remind us to be aware of these hellish shortcuts.

Great article, been in div/table hells for years. Nice to get a lucid explanation of the problems/solutions.

i really appreciate this article… thanks so much!

Good Post!
Thanks

Nice, It explains almost everything. I didn’t know many of this things. I should read about semantics more.

I use div tags more often than needed to, because it is easier to align and control.

Excellent article, and very informative. I know when I first moved from tables to DIVs I was a bit intimidated and it definitely takes some time and experience to become truly proficient, but it’s well worth it. I think the only real issue with using DIVs is browser compatability – I don’t know how many times I’ve built sites and ended having to go back in and tweak things to get them to work in a certain browser (almost always IE of course).

Good article… currently learning on using div rather that table…

now times it’s hard to find pretty good info, i enjoyed so much reading this article, thank you so much for posting such interesting topic.

nice article… hope next time u come up with again a nice one. weating 4 that…

Wonderful article, thank you! It’s helped me grasp the concept of using block-level elements a bit more.

Very Good Article… ! Help me a lot about deference between Table V/S Div. Thanks Smashing :)

Nice article .. Wondered to find still tables are alive at some part of the world !!! (Even Google still uses it)!! Carry Onnn…………….

Great article.. very informative..

This article is misleading. The way browsers are built to interpret tables and divs are key issues here. Tables were never design for structure hence browser interpret tables in tabular form and if you do nested tables, it is as good as rendering at N square. Whereas divs are design for structure and renders at N level because they are interpreted as single structure even if its nested.

From table hell to Divs hell only true to mean that the designer or developer took shortcuts or just being plain lazy. If you take pride in your work, your source will be very elegant and easy to maintain. Its a human problem. Its like maths, if you do not understand the root of the problem, you will not understand the solution.

Understand the problem and apply the solution, don’t use the solution blindly.

Awesome man!

What a fine article. I’ve learned a lot.

“This is a hell of an article!” ;-)

I’ve been teaching semantics and CSS styling to professional web developers and when I read “When every column on a website is given its own container, many unnecessary div ids are created. This can easily be rectified by adding a class to the body tag.”, I know I can send this link to everybody and say “read this, it’s full of sense”.

Thanks!

great …. :)

But i cant believe that people growin their own hell ..

for exmpl. using plenty of div containeres instead of list elements ..
I m living in heaven and i love it :D

- german capability ;) -

Nice!
I just don’t agree of using lists for forms. I think tables should be used instead (easier, better).

Great article! Wish I had stumbled onto it a couple of weeks ago!

thanks so much

That’s been a good read. Thanx for the nice article.

Using divs for more complex layouts is nightmare. You end with at least 6-7 nested divs and 50-60 classes/id. And when you see the final code you are saying “man, I should use tables”. The reality is that mixed solution with tables and divs is the best way in many complex situations

Was good to see a section about HTML5 at the end of the article. The image in that section was particularly helpful in understanding how the new elements will be used.

As the author said, it does seem like it’s a long way off, but from what I’ve read it’s possible to start using HTML5 right away although browsers won’t understand the semantics of the elements—they can style them just fine though!

@maddo:
I couldn’t agree more. Thanks!
While I find lots of good remarks and advice in this article, I still use tables for some specific issues and will not change.

It’s all very well being purist about the usage of DIV’s, but there are simply some situations where there is no avoiding the necessity for adding extra DIV elements. A prime example is setting widths to containers that need padding. If you want to avoid hours of needless frustration in getting them working cross-browser, separating a single DIV into two is a necessity, the first holding the width (e.g. .container { width: 300px }) and the nested DIV holding the necessary padding and margin elements (e.g. .container .pad { padding: 5px; }).

As for the comment from #60, that law is patently false over time, IMO; it is only true for the initial learning curve. I initially used to struggle getting DIVs working after having spent most of my designing career using TABLE tags. However, since I invested the time and effort, I can safely say that I can develop incredibly complex designs faster than I used to do using tables, and they’re also (long term) easier to maintain than TABLEs. Also, I remember having to come up with all sorts of hacks using plain HTML and TABLEs. (I would also point out that, IMO, using TABLEs for design is actually a hack, so you’re immediately using a hack yourself). It’s a fact of life that hacks are necessary in most web-design because of the ways different browsers behave.

As for the expanding height and shifting width, I can’t say I’ve ever encountered a situation where I needed that, so can’t comment.

Great article, enjoyed reading it. Thanx!

This is a great article – thank you for sharing it and spreading the word about divitis. There are way too many websites, especially Wordpress blogs, with a crazy number of divs – but people still think it’s fine because it’s CSS based… :-(

Interesting overview. I used to use tables before working professionally, it took a few months for me to be completely confident using divs and css. Now I would never go back to tables, divs work across multiple platforms and cause alot less stress. CSS 3’s new features like multi-column layout look very interesting as well.

The future:

- header or nav tag etc
– div tag
– div tag
– div tag
– maybe a span tag, the “always use it before content” rule
– #Title or #Text

There will still be terribad “professionals”. If nobody takes the reigns to break the bad semantic for once and ever (never will happen), 80% will still use it wrong, 15% will use it to populate their CVs without having the slightest clue on the meaning of all this (trendy) and the rest will live the dream hating every single backwards adaptation and wishing they were dumb enough to not care or just do it wrong like the majority. Wait, its like society, i get the whole ’social’ thing now.

Those are fake numbers btw, as any statistics on the internet.

Source: Intuition.

Great Post! It’s funny because you mention Twitter as an example website. They actually use tables for layout on their profile and home pages when you log in. I know this because I created a Wordpress theme called Twordder that looks like Twitter and it was a pain to create a css 2 col layout with equal heights! I had to use js to measure the longest column and them resize the other col. I’d like to see a post on that.

Good article. It’s not something new, but its a reminder of what NOT to do and why.

P.S.:
Cool site there, Zanthrax (giveupandusetables.com). Besides the fact it is ugly and useless, it has one error & 5 warnings in only 56 lines of HTML code. Way to go… :(

To be honest, I suffer of divitis, but I’m working on it. This will help, for sure. Thanks.

After reading Andy Clarke’s “Transcending CSS” about two years ago, I realized how bad my own div-itis had gotten. I now make a point to think logically about what the tag is supposed to signify. If you think of a div as a Page Division, the crazy nested divs stop. What you really need to do to make good markup is think about the tags without any of the design elements to it. Once you’ve got that laid out, only then you add the presentation (css). Makes for much better code. Of course, some times thing have to be worked around, but for the most part this will lead to clean, easy maintain code.

Awesome article! I’d like to think that my code is as clean as it gets. I always make sure that all websites I develop have code that is easy to read, XHTML valid and cross-browser compliant but this article makes me realize that I have sometimes fallen into the trap of overusing divs when there are other block-level options. Thanks for the great tips!

We should burn IE6 so we can move towards a better tomorrow with HTML5

I can’t wait for Html5 come out. Make my life much easier with new structure element and new tags.

I think the article was great, but what I was expecting was more of how to switch over from tables to divs, but the article was still enjoyable.

absolutly awesome, thanks for sharing!

I use CSS Tables (degradable to HTML Tables via conditional comments for soon-to-be-forgotten IE6 & 7).

I dont believe this.. nice article anyway.

This article is well-intentioned but fails on many levels, because it doesn’t take into account all of the non-ACID compliant browsers the average developer or shop has to code for.

Hilarious: w3schools.com is a ‘center’ tag with a ton of nested tables. Div-itis is just as bad.

Thank you for this wonderful article!

I’ll be one of the few contrarians here, and have similar comments as Ron and maddo…

Seems to me, that the majority of people who think CSS can do everything, are those who (a.) have too much free time, or (b.) virtually unlimited budgets, that would allow them to sit around all day (week or months) tweaking endless workarounds, creating alternate css versions (or non css versions for other devices), and using dozens of lines of code (rather than a single line variable) just to align text or provide site users greater flexibility (with fluid webpage layouts, for example).

I’ve done as much as is reasonable with CSS, and am more than happy to use it to add stylistic aesthetic treatments to fonts, navigational and page elements. But like most structured code standards (used primarily for design and layout, by the way), the people managing the standards are almost always too technical for the good of the standard, and tend to disregard as silly any designer who wants to actually use the standard.

I hear people boo-hoo about the lack of compliance with CSS standards. Well, I’m sorry, but I care exponentially less about Internet Explorer’s CSS compliance, than the fact that the CSS standard itself is too limited and is simply not evolving quickly enough, nor in a way that addresses the needs of its actual audience (webmasters, developers, and even mom-and-pop do-it-yourself site owners that all you guys seem to hate so much).

I’d like a one-line CSS variable that adds radiused corners around a box, without the need for any images or 6 divs. And right now, all the standards people and technical CSS gurus reading this have absolutely no idea why I’d want something stupid like that (or they’ll reference some non-CSS tag I can use, which will only work in Netscape… which, by the way, is a true story). That’s my point. If the code or standard doesn’t meet my needs, that’s a problem with the standard – not compliance.

Unfortunately, I don’t have the time, budget, nor interest in becoming an absolutist CSS purist. When revamping a business site recently, I used good old HTML tables to give myself a fluid page layout I want, the ability to use 3 or 2 columns without using (or having to maintain) a completely different set of CSS files, avoid several issues with different browser or mobile devices, or even printers (yes, people still like printing long pages, and printers by default mostly still don’t know how to adjust a fixed width page that is wider than 780-ish pixels)… and more.

So, if you want CSS to become THE standard, adopted and used for EVERYTHING related to the presentation of information online – then update the standard every few months rather than years (or decades), implement and include features and options based on the requests and needs of the ENTIRE potential audience and users – which includes designers and “mom and pop” webmasters too. Sorry to break it to you.

Jeez… This dialogue has been going on for years… So, I’ll even share a potentially profitable idea for whoever wants to take it. However, if you make millions, I’d sure love at least a little help with my mortgage. You’re on the honor system.

Here’s the idea: Develop a browser plugin that could become as ubiquitous as Flash, which allows for community (managed), and local (webmaster) design elements to be created and rendered in the browser. Any webmaster with some basic understanding of the code (API) could then sidestep the CSS standards body altogether, and we (the world) would finally have an easy one-line tag that puts radius corners on boxes, or whatever else we want. The code would load into the viewers’ browser plugin when they land on my site, and they could see the design and layout I want them to see – unlimited by a half-decade+ old, outdated CSS standard, or a standards body that doesn’t even understand how people are trying and desperately want to use their standard. Security risk? Possibly… But open it up, and I’m sure someone will figure out how to display design elements on top of a webpage without giving the plugin access to the local (users’) system.

So, go forth and profit (or do the Open thing if you must). I’m tired of CSS whores telling me *I’m* the idiot or some stupid programmer, just because I don’t use CSS for everything. Well, sorry kids – I don’t have unlimited time or resources to make nice with all the browsers or printers. I have to use what works for me, with the resources I have available. And right now, the best solution is a mix of reliable old HTML and the few interoperable and most useful variables available through CSS.

Cheers,
Thomas

Very good article. Well written and informative with some really good stuff that is explained very well. I would be remiss, however, if I did not take yet another oppertunity to point out the false economy of “fewer lines == better code”. Yes, I am old fashioned, perhaps old school, but this is not as simple as this author and so many others assume.

The author is correct in pointing out that most of software cost comes from maintenance. But then he falls into the same trap that so many others do with the false assumption “therefore, if you have fewer lines of code, there will be less to maintain and therefore maintenance cost will be less.”

I could go on and on and on as to how this is erroneous, but the ternary operator does for me in…you guessed it, a single line ;)

Compare the following

costTotal = sumProduct > minPurchase ? sumProduct + feeShipping : sumProduct

Now, a C guy would rip right through that. My point is NOT that this is beyond comprehension. However compared to:

if (sumProduct > minPurchase)
costTotal = sumProduct + feeShipping
else
costTotal = sumProduct

I have still to meet the computer scientist who can provide a compelling argument how the first is more obvious, simpler to read, or anything else.

I know I have taken a “pretty pages” layout discussion off course a bit, but someone I have become to feel that it is my duty to combat this. Just because there are fewer lines of code does not automatically mean that the code is more easily maintainable. From my experience from working on hundreds of thousands of lines of code in various languages, the inverse is most often true. The more lines of code there is, more often than not, it is easier to figure out what is going on (caveat: all other things equivalent, a good coder in fewer lines is still better than a scriptkiddie being verbose).

There are also aother assumptions in this article I take great exception to. “More lines means more bugs”. This, I simply do not get. I could write some wicked nasty evil bugs in five lines that could take a VERY long time to figure out. If that same piece of logic was more verbose, the bad assignment or reference pointer or whatever would be very, very obvious.

Everything else the author states about file size and code complexity, I agree with. And I believe it is very important to take these into consideration. But when you are simply gobbly-gooking your code to get it down to X-n lines, than you are not the best coder in my book.

To sum up, it comes down to this. Higher level languages were developed for us, not the machines. The first thing a computer does with your sources code? Gets rid of it and turns it into something meanginful for it. If we truly wanted the most efficient code possible, we would be writting in 1s and 0s. ****The primary function of source code is to express program logic to other humans.**** To forget this is to fail as a proficient programmer.

Very good, very useful, especialy “Div heaven” about good html. Thank you.

I agree with Thomas 100%. I use what works for me – HTML with a mix of basic CSS variables. I prefer HTML tables for fluid layouts over divs.

Yes, there are benefits to using purely CSS for a site, but the benefits are mostly for aesthetic purposes. I don’t build pretty, swirly, informative blogs. I build functional e-commerce sites with thousands of pages. It’s impractical and unrealistic for a “real” web developer on a deadline to spend so much time tweaking CSS to be perfect. With HTML, my possibilities are infinite. With CSS, I’m limited to what a few CSS gurus have come up with.

Are my sites fast loading? Yes. Are they buggy? No. So what’s the problem? Using HTML with CSS variables sprinkied in works for me and makes me money with no coding maintenance issues to worry about. I love HTML and can’t wait for HTML 5 to show CSS who’s boss.

One other thing against nested tables. They slow down the rendering of your page because the way they display has to be calculated from the inside out to get the sizing right (unless you used fixed table layouts, which most people don’t).

Thanks for summarizing all of this so well!

I am surprised at the number of people arguing that css is too hard or that it requires more time than table layout. Well structured semantic html and css is a breeze – IF you know what you’re doing. It does take slightly more time than a table layout or a div heavy layout, but the benefits are many. For example, proper structure means your site can last forever. A redesign doesn’t mean starting from scratch. I recently redesigned a site without touching the html. If you honestly think that its impractical and unrealistic to use proper, semantic html with good, solid css for appearance, then you need to evaluate your own skillset in this area.

And lets not forget that most people that use table (and those with div-itis) also fail to optimize their code for search engines. With as much money as people spend on SEO, I am surprised they let their developers get away with the sloppy, non-semantic code people do. Failure to use proper markup has more of a cascade effect than most people realize.

With HTML 5, those that don’t know how to use proper semantic markup with css are in even more trouble, as it will lean even more towards the creation of the semantic web. Sure, it is years and years off, but if you’re still struggling with using the correct markup now in 2009, do you really expect to be able to catch up then?

Very nice article !
it really shows the best practices BUT IN THE REAL WORLD…
Browsers are our real enemies…
The HTML 5 overview is nice too but if the interpretation of the code is as versatile in 2032 as it is now, these new functionnalities will be even harder to implement… :)

A well written article and a nice summation of both table and div problems. A lot of the focus is on using tables improperly, so it’s nice to see an article published about DIV woes.
Some of those pictures seem a bit random however. Nevertheless, it is nice to see an article on web design at Smashing again.

Very detailed post. Thank you!

Good article, one thing I’d like to point out in the ‘News list’ example is that whenever I nest h2’s inside list items like you have in the example I get validation warnings.

@Thomas and Nina: fair points you’re making if CSS is not working for you but reading through your posts (or in the case of Thomas – skimming through) you might be misunderstanding the intended use of CSS. Its not meant to do EVERYTHING, its a complimentary styling language to a markup language. I like my whiskey with ginger ale, and my vodka with tonic… I could have them by themselves but im not a glutton for punishment. : P

I’m sorry to hear that your experience with it so far has been so oppressive, it may not be able to do rounded corners yet but it really is the better way.

Great article! *_*

Great article!

almere, Holland, europe

Tables are for table data only …

table for design is not the right anwser..

semanthic html and css is the best effort on design.
and got al lot of benefits.

greetz Blue.

Most people ranting about “CSS is harder or longer” should take the time to LEARN semantics, CSS and how to avoid or resolve browser bugs instead of loosing it here with *stupid* comments and being stuck for ages with “table layout with some CSS inside” which is like deguising a Trabant into a Ferrari.

They should also learn no to rant about what they don’t know.

When I started to make websites 12 years ago, I’ve been doing tables for 6 years but now I’m sort of an expert in the semantics/css field (6 years of pure css layout, no divitis so far and I’ve been teaching CSS to other professionals). And I can say: yeah, it was hard at the beginning, but when you get it, it’s so fast and easy. Even fixing IE bugs has become easy (takes some time but there’s always a solution).

Michael W.:

You showed an h2 inside a li, but I believe putting block-level elements such as this inside a li does not validate.

tim:

whenever I nest h2’s inside list items like you have in the example I get validation warnings.

Hrm, have you really had the heading tags not validate in list item tags? I’ve not run into this. Li tags are block. What doc type are you using? I prefer xhtml transitional . . . On the other hand, DL’s can’t handle heading tags, they won’t validate. Which is a shame, because many lists are really definition lists, and having the definition lists contain a heading would be optimal.

Such a great article, it’s really help me seeing something.

Lots of information is this post. Thx

Great article!

Excellent article. It was a concern for years that it would become div/span’itis for people who never really ‘learned’ but who simply replaced tables with divs and spans. CSS frameworks usually increase the amount of divs and spans a design needs, unfortunately, the speed gained in using those frameworks also created a lot of developers who choose speed over quality. Apparently we taught people CSS, we just didn’t teach them patience ;)

Nice post!

Anyone how has ever maintain huge table-based site surely knows what kind of hell is that! Tables are not logic and natural!

On the other side, only one NAY for divs are when you try to fix them for s***y IE6 … that’s kind of hell, also.

Coclusion: when someone says that tables are better than divs, it means that he(she) doesn’t know nothing about essence of HTML, nor CSS, and that he (she) is lazy to learn new things.

Good article but your first example is misleading. There isn’t less code in you DIV example. That example shows none of the layout code which is inherent in table tag. Try getting a nice flexible layout to work with IE6 or 7 and you WILL end up with much more hackey code.

This is an excellent and informative article! A must read for all web designers out there!

Great article, keep up the good work!

It should be read by every beginner in web design.

Thank you for the great reading.

I was having some trouble understanding divs vs tables and with the help of your article and some googling I’m on my way to great design.

Again, thanks.

Good and informative article, but I do not agree with the extensive use of lists (ul li). For instance in the simple form example I would rather use paragrap (p) instead of ul li as I find it more correct. The argument of counting elements can be used everywhere, and could eventual lead to using ul li instead of p so that you can count the number of paragrap in an document! I also note that the more complex problems with ul li is not touched. Such as having an lists over several vertical columns sorted

I specifically liked the analyzing of current state of the web, and I totally agree with the general argument of div hell etc.:)

Thanks for sharing

It’s good to see a tables-vs-divs article that doesn’t amount to “all the cool kids are using CSS, so don’t be a table dork.”

However, this article still resembles most of the others in that it implies that table layout must necessarily be done in the 1997 manner, with all the usual table markup. A more useful comparison would be between tables styled with CSS and divs styled with CSS.

I am glad that many have disagree with comment 60…and feels that this article is misleading. And yes, again I have to agree with comment 66…I will never hire comment 63.

I have to agree with comment 69 and comment 80 as well. You really need to put in effort to understand div and why was it use for structure. To those who doesn’t really understand markup, please do not mislead others.

By misleading others, you are giving them the wrong foundation to begin with.

For a good example of a table-less complex layout look at Eternum Online’s portal page

“Also, search engines such as Google use complex algorithms that use the semantic information in classes and ids.”

Where is this documented at Google?

Seems like a mention (or better yet, a discussion) of RDFa would be in order, here.

RDFa, sometimes explained as “Microformats on Steroids”, provides additional semantic markup inside of standard HTML/XHTML. W3.org has a surprisingly readable primer on RDFa here: W3’s RDFa Primer.

In the context of this article, RDFa makes the content more “understandable” to machine agents, and can also serve as cues to developers.

Reading articles like this always make me wonder.

It makes sense that web developers be more concerned with the code and how “things” like search engines and devices for the disabled read and interpret the code than they are about the presentation, but it seems to me that it always gets to a point where you have to sacrifice one or the other if you want a website that doesn’t look like everyone else’s.

For websites that are meant to be informational (like blogs, main search engine pages, news sites, even social networking sites) it’s perfectly fine for them to all look the same (and they do, 90% of the websites I see all look like boring “table based” layouts regardless of whether or not they’re done with CSS divs or tables, what color schemes they use, or what graphics they include).

But when you’re someone like me who is an artist working in creative visual fields, the way your content looks can matter more than the code behind it because your content IS what’s being presented visually. So you appreciate something a bit more interesting than just “columns and lists” and everything being very linear.

Once you get into trying to create designs like that, the code in the background becomes complex no matter WHAT you’re using because you’re trying to do something more than just line up content in blocks.

For this reason I think most people in my field opt for flash websites to have complete control over a more fluid design that’s about placing structures wherever you like and having it always look the same rather than trying to do it solely with HTML and CSS and then having to worry about so browser specific issues.

At the end of the day, I care more about the way that my visitors are seeing my work. If I can view my website in the top five web browsers and top five mobile browers which make up 100% of what my visitors are using and it looks the same in every one of them and highlights exactly the areas that I want highlighted, I honestly don’t care if the code is “messy” – but that’s because I’m not a developer.

I also don’t care about other developers needing to understand my code because I’m the only one who works on my site.

While I do see tons of sites moving toward CSS div layouts because it’s supposedly “better”, I can’t say that I’ve come across many if any that don’t look different in ways I find completely unacceptable when going from one browser to the next.

At least tables have been around long enough for most if not all IMPORTANT browsers to interpret them the same way. It’s annoying going from one browser to the next for a CSS div based site seeing extreme changes and shifts from the colors to font sizes to the location of images and content.

It gets to the point where I end up shutting stylesheets off much of the time and if that’s what your content inspires – shutting stylesheets off just to see some consistency – what’s the point of using stylesheets in the first place? All you’re doing in essence is stripping the page back down to its basic HTML, which is what developers are trying to move away from – which makes little sense to me.

Are CSS divs more flexible than tables? Yes, but if your website is going to end up looking like a table based site anyway, I’m still not convinced that it matters to anyone other than developers which one you use nor am I convinced that CSS divs would be an easier/faster way of getting things to line up properly and consistently in a table format than just using tables and being done with it, and if your site is going to be more visually complex than having everything just line up in columns and rows, CSS divs can still only do so much before they begin to show discrepancies from one browser to the next.

I use CSS more for styling, not layout. I used SSI includes and HTML tables for my site in the beginning and had not one problem with it. It was visible by everyone in the same way who were using methods of viewing my site that actually matter and at the top of the search engines.

Then, after reading everywhere that CSS divs are better, I decided to redesign my site without tables using only CSS to determine layout and it’s become such a chore to get it to look the same as it did using only divs that I’m bored with it now and have been trying to come up with a new design to accommodate CSS divs, when it SHOULD be the other way around. They should be accommodating me.

The time it takes to learn all of the different work arounds for each browser and each element to get things to look the way I want using only CSS pretty much negates any of the supposed benefits.

And I can’t accept that “using divs or floats or positioning may cause content to shift down in this browser or be pushed out of view in that browser or xyz”. If it’s not displaying all of my content exactly how I wish it to be displayed at all times according to the browsers most commonly used in my visitor statistics, it’s not worth it to me.

Sometimes, things aren’t better simply because they’re newer and more flexible. If older methods are still more universal, they’re not obsolete. Until CSS advances to a point where it can be used to EASILY produce common layout styles using simple tags that everyone can learn within a few minutes and that render the same in the major browsers without issue, I’m not going to hand anything over to it entirely.

Very nice! One of the better articles I’ve seen. Summed everything up in a nutshell

Nice article. Worth reading :-)

very nice tutorial……i learnd soooo much thngs 4m it….thanx for share…….[:)]

Hey, nice tutorials with nice explanation… I think it would be wise if I learn from reading this blog, instead from some one else locally…..

Regards,
Synergy Informatics
Synergy Informatics Web Solutions

Some good tips, and I’d love to only use divs, but 30% of my visitors are still using IE6 where the floating divs just fall apart and and then IE8, Chrome, and Mozilla display padding differently from IE7 and move my columns around and then the body background dosn’t go to the bottom of the page in Chrome ( I do love chrome I just don’t understand it) and if you use too many floating divs your bakckground just disappears and it just make me want to cry! The one good thing I’ve seen on this subject recently is the IE8 compatibility view so that I can show my customers that it’s a real issue and not just some techno-geek stuff that I’m trying to confuse them with.

Div is always the best but needs more attention of course. There are tricks that needs to be mastered such as including a footer page. having a left-side-nav, right-side-nav, center-content which flows on auto attribute or downwards. Placing a footer comes a hell….. please share more light on that. For ages i have been writing few if’s (){} to fix them. Is there any way at all beside that.?

Nice Article! Really Helpful

i am a newbie trying both tables and DIV. I was thinking I could start code the ‘right’ way and use div’s etc. but after reading your thoughtful and well researched article there is no doubt in my mind that tables are the way to go. Why all the talk about using them for tabular data ‘only’ is absurd. They are far more simpler to design and maintain – you are using the same tags over and over so the learning curve is not that steep and they seem to work well in most browsers with far less tweaking. There is no comparision between nested divs and nested tables – the latter are far much simpler to use. Thanks for helping me make the right decision!

Nice article, however you forgot to mention how mind shattering can it be to make a DIV based layout work in every browser, or how poor the support for floats is.
BTW, neither this page nor its stylesheets validate against W3C standards. Check it using the official W3C validators, I don’t want to violate the ‘no link dropping’ rule.

This one is a very deep and well written article.Its very informative.Thanks for the information.It helped a lot.

this is the most concise and informative address to this particular issue, thank you.

really good content. beneficiary for every body

baljit

well, still today the reality is that you cannot use div’s to build a website…

just try this, the simplest thing:
<body style=”margin:0;padding:0;”>
<div style=”width:100%;border: 1px solid #ff0000;”>i want this div to be always as wide as body</div>
<div style=”margin:auto;width:960px;”>fixed width and centered div</div>
</body>

Now resize the browser window, make it narrower than 960 pixels…
It cannot be done.

Great Article, Thanks for sharing…

The fact that this debate still exists conveys two things:
1. Browsers are horribly inconsistent, even in 2009.
2. Coders are horribly inconsistent, even in 2009.

The MOST important advice in building a website should be to DO WHAT WORKS! It is a VERY DANGEROUS thing to refuse to employ an obvious and highly scalable method simply because some false authority told you that it is “antiquated.” There are still large companies (and very profitable) that use COBOL and VB6!

You don’t get paid to worry about knowing every tag and CSS rule known to man. You get paid getting the website DONE. A REAL professional puts the customer first and gets the job done, not engage in a pissing contest about which approach is superior.

Its a very good article for me, because i am in verge of changing my tables to divs for my site, and learned more.Thanks for the information