Scrolling an absolute div isn't "hard to control". They adjust for the content within.

Also I'm no fan of the table model with divs, mostly since we have tables for that, and I don't feel the need to mimic table layout, when you can do it much easier and more flexible with floats.

Hugo said on June 16, 2005

I also know both tables and CSS. I've been using CSS, mainly for formatting, since 1999. I'm not as proficient as you by a long shot, but I understand the principles.

Please don't get me wrong -- I do agree with you that using tables isn't ideal, and CSS *should* be able to replicate every behaviour currently possible with tables.

But the problem is still that CSS *CAN'T* yet replicate all the presentational behaviour of tables, not just because the spec needs more attributes (easy-to-code column height matching of divs would be a start) but also because not enough computers out there can make sense of it.

Look at the majority of major websites: eBay, IBM, BBC, Microsoft (unsurprisingly), EVEN THE MIGHTY GOOGLE -- ALL use tables for layout.

So as much as they might "sux", tables aren't going away just yet. This does not mean I like the situation -- it just IS the situation. :(

Henrik said on June 16, 2005

Hi again Hugo...

I actually still disagree on you main point: that CSS can't replicate all presentational behaviour of tables.

Sure, matching column heights would be nice, although you often don't need to. Simply use faux columns and then a margin-left or margin-right where the too-short div should have been. So far, except for one very advanced layout, I've been able to use these techniques without using Javascript. But does it matter? The user won't be able to recognize faux columns in use anyway. (using it on my own site)...

As for making all columns equal, this is the page for you:
If you turn off JavaScript it simply doesn't go all the way down. Place a nice faux column there instead and you're set, even for users without JavaScript on - and let's face it - most IE users don't even know what it is and hence have it on.

The users to my site quite often have JS off, but then they are using FF. Comparing with another site of mine, aimed towards non-tech people, they always have JS on. (over 99% at least)

I do know many sites use tables, but that's not an argument for continuing to using them. At least not a valid argument: it's called authority argument... A reason I can think of, that they still use tables are the huge costs involved in switching. Doing work myself, and redoing a layout + coding for a non-table design is a large commitment! Instead, use CSS for new layouts, and use semantic markup always.

Tell me one thing tables can do, layoutwise, that CSS can't!

Henrik said on June 16, 2005

I just gotta add - also uses faux columns:
body { font-size:.75em; margin: 0; padding: 0; background: #333 url(05/bodybg.gif) repeat-y top left; }

it's the way to go if you want 'em down there.

Hugo said on June 19, 2005


I've never seen a BLOG get spammed before!!!!

Henrik said on June 19, 2005

No? It's quite common. How about answering my comment Hugo? ;)

Hugo said on June 19, 2005

OK Henrik, here we go :D

Faux columns using a repeating background image eh? Although it may sometimes work, including on this page, I consider it an ugly hack, worse than using tables, because you rely on an image to display the main structure of the page, not code. I thought one of the reasons behind CSS was to reduce the need for images for page styling? At least with tables, you're using nothing more than a few extra elements and CSS border styling to get your columns with virtually no images. You can make sure that each rectangular block is a certain height, and goes down as far as the column it parallels.

CSS styles tables too, so why eliminate them as layout tools "for the sake of it"? If, in all its glory, CSS can't produce matching columns without horrible hacks or javascript, what in heaven's name is wrong with just sticking in a 2/3 column table? It takes half the work to do and looks great, no javascript, no images.

Sometimes I get the feeling that avoiding using tables is done for dogmatic rather than logical reasons. confirms that suspicion for me -- why have an entire site demonstrating how to do with Javascript hacks what you can already do with a simple 3-column table? Why use images either?

I don't see any real difference between DIV and TD.

Jonathan Snook said on June 19, 2005

Hugo/Henrik: Firstly, my blog gets spammed on a semi-regular basis but I've managed to clean up anything in under 24 hours (depending on how busy I am) and usually only affects older articles (like this one).

To further address the idea of using DIV's vs. TABLE's is really more along the lines of semantics. A table is meant to describe tabular data and not to be used for layout. As a result of using DIV's instead of TABLE's, I have a greater potential to create a more accessible site no matter what user agent (eg: browser) a user may using.

The background image on this site is used to create a style for each column but without the background image, the content would still be in a column format just as if I had used a TABLE and not added any style. In addition, there is no javascript used on the site to achieve the column layout. As a result of using DIV's, I can reformat the look and feel of this site without ever having to change the HTML source and the code can still maintain it's meaning.

Hopefully, IE7 will come close to meeting the CSS2.1 and some of the CSS3 spec. At which point, most of this discussion will become less of an issue.

Henrik said on June 19, 2005

Let's hope you're right about IE7, although when launched, and if it's properly supporting CSS, we'll still have the discussion about backward compliance.

You pretty much said everything I would have said, but I'd like to make some comments none the less.

You're talking about page structure Hugo, and as far as I can understand, the page itself, has its own structure, its own markup as to define what type of element or object everything is.

In-line images on the other hand are supposed to be relevant to the content on the site, may it be a blog-post or anything else. CSS comes in as to separate the post iteself, with whatever information what it aims to convey, from the presentation - the layout. Hence, the CSS as a background image doesn't influence the content, as a table would do - a table doesn't add any new information or convey any new information to the user. Hence it shouldn't be used for layout - it should be used to present tabular data.

Add this comment to Jonathan's comment and you got quite a good reason to avoid tables.


Martin said on July 05, 2005

Thanks for the help jonathan, Your site is very nice and more importantly its informative, Thanks again.

chad said on July 15, 2005

I just wanted to say thank you for the this article and the examples. I am new to css and have been trying to figure out how to do something like this for the last 3 days. This did the trick to the T

Ive added ya to my bookmarks!

Steve Magruder said on July 16, 2005

That tables should be only used for tabular data is a rather dogmatic point to make.

Site visitors almost always don't care about "semantics" (in the narrow sense discussed here)... they care about content and what they can do at the site. And even when they do care about semantics, tables need not detract from semantics. One can use the summary attribute and ensure the tables "linearize in a readable order" according to the W3C. Also, if one wants to show an "accessible" site, one could easily create a "text dump" or "basic html outline" version of their site pages for accessible viewing (e.g., "Click here for text only").

I think CSS for formatting is wonderful, but using CSS div's to fully replace tables for layout provides no real value-add. If all I should care about is reducing the data I'm sending to the browsers, replacing tables with div's only provides a marginal improvement. On top of this, whenever I as a programmer have to nest anything, it makes for increasingly unreadable code--at least the table/tr/td paradigm at a glance is very readable, usually with little or no surprises (esp. given that most browsers render tables exactly the same!).

What makes table-based layout so useful and predominant is that "thinking in tables" for the designer is very very straightforward. We have the legacy of the spreadsheet, I suppose, to thank for this. "Thinking semantically" in the CSS/div sense is unlikely to catch on as long as a simpler approach is available, and esp. because tables can be precisely formatted with CSS anyway.

While I am open to using div's for layout of some site features (esp. where the table paradigm seems like a major overkill), I reject the idea of throwing out what I know to already work nicely just because it's the current foo-foo way of doing it, esp. when almost nobody who visits my sites or pays me money will appreciate the effort.

Henrik Feldt said on July 17, 2005

Hello Steve, and sorry for the text formatting, Im currently abroad.

The last couple of months I have been upgrading a content management system along with its homepage. It was a terrible experience since it used tables. The code was totally unreadable with all its "pix.gif" images. It was a terrible headache to edit. Really bad that is. I came to the realisation that tables suck, even more than I had thought before!!! =) Cheers

Rossmingo said on July 18, 2005


I really like the idea of using divs. However I cannot get my website to centre in Firefox. It always wants to cling to the left. Any ideas what I might be doing wrong?



Jonathan Snook said on July 18, 2005

Steve: div-based sites provide more benefits to the site developer than to the site user. From a site user's perspective, in the scope of the traditional user, they are unlikely to notice much difference except perhaps increased performance. Although, I agree that the increase is nominal if tables are used purely for larger layout issues and not unnecessary minor ones (like styling navigation or lists).

A DIV-based approach provides a more modular code design that allows for a much easier manipulation of page layout (as has been evidenced by the numerous redesigns of this very site). Each content component can be clearly demarcated by its container DIV making code much easier to navigate. Code depth becomes less of an issue as components rarely go much deeper than 2 or 3 levels.

Table-based layouts are only more intuitive for those that learned to develop that way to start off with (such as yourself, I imagine) and is actually a concept that I find most designers (especially those coming from a print background) simply don't grasp. Trust me, I've built numerous table-based sites using designs put together by designers who simply didn't understand the rows and columns of a table-based layout. I have pulled off more inventive designs using CSS than I have ever seen possible with tables.

Jonathan Snook said on July 18, 2005

Rossimingo: a link to an example page would be required to accurately troubleshoot your issue but the first thing to check is that your containing DIV has margin:auto; If so, it may be that other coding errors has thrown your document into quirks mode preventing the centering from occuring correctly.

said on July 23, 2005

not bad

MA Razzaque Rupom said on August 15, 2005

Nice helps of tableless liquid layout. It helps me a lot. My thanks to the contributor(/s).

Programmer said on September 02, 2005

Tables are the standard and are not going away for a long long time.. 98% of the websites online use tables in their design.

That sounds like a standard set by the developers.. Get used to it.

As for CSS and tables. When working with multiple developers abroad CSS tables are a mess. Instead of looking at a single document you must reference several document to figure out what is going on with the design. To me that is inefficient.

Don't get me wrong.. CSS has it's uses. But having to use hacks to replicate the actions of tables is pointless especially when the whole ideamis to have a cross browser viewable website.

Anyways, I'll stick with tables. Never had an issue with cross compatibiliy because I inderstand what IE, Mozilla, Opera can and can't do. Plus this single page is over 56k. Geez why so huge for such a simple layout? and to make matters worse that doesn't even include the stylesheets referenced.

Blah, blah, blah

Jonathan Snook said on September 02, 2005

heheh, you're too funny! This single page is 56k because of all the content. the form, the comments, the article. Your comment alone probably added a kilobyte or so. The HTML itself is fairly minimal. However, page weight wouldn't really change much either way by switching to a table-based layout.

In any case, if you've developed for any length of time, you'd understand that developers used tables because CSS just simply didn't exist. So, yes, a large number of sites use tables...they had to. But technology progresses and new techniques are made possible. This is just one of those techniques.

Anyways, you read too much into this article. It's something in the CSS spec to learn about. I'd hate to think you're afraid to learn...

Jonathan Snook said on September 02, 2005

Oh, btw: I'd love to see you take this very page and make it a table-based layout. Let's see if you end up with a smaller file size. And next week when I tell you to redesign it, you let me know how long that'd take. In the meantime, I'll be making cash hand over fist doing new sites while you're busy doing maintenance work.

zenobius said on September 21, 2005

Cool, you'll be interested to know that i have made and improvement on the concept by using styles like:

100% width

20% width

20% width

the follwoing are appended to portlet-inner-col classed elements to set the coloumns and spannig of coloumns, the comlplete style sheet is at my site.

50% width

75% width

100% width

Also styles like
one-third, two-thirds

The concept I like is to create a coloumn on the left that is used for headers and sub notes (like what you see in textbooks), and a fat coloumn on the right for content.

You start with div class='portlet-inner-row'
then two div portlet-inner-col childnodes. The second coloumn needs to have a class that looks like portlet-inner-col.span-three.

Im probably not explaining it vbery well, that's not my strong area, if you look at my iste you'll see what I'm going on about.

zenobius said on September 21, 2005

Yeah, I see others are also trying to get across to people that websites are not foxtel or game menu screens, but rather that the webpage styling requires more direction towards book, magazine and newspaper layout techniques

At all costs avoid the tv or games approach unless you are providing the replicant in html form.

nuff said

zenobius said on September 21, 2005

Oh and the style sheet that I have created does emualte coloumn spanning, but not row spanning(yet?). style sheet works in at least ie 6
for a look a
will show you that ie and firefox render this html/css nearly the same.

And if i remember what I was reading at, it all comes down the right doctype.


zenobius said on September 21, 2005

general_REC: right own man. when

Henrik: The point of emulating tables, is that when done properly it will also degrade nicley to some sensibly comprehendable layout. vis

yep this backgroun faux shit is bad. specially since this particular design(being great as it is) can be done with css.

the bad thing with tables is that for some reason a style created style wide for the page wont permeate through a table lement into its tr and td tags
so i dont want to use font tags, shudder.

If your hiring a designer who does not know anything about designing for paper, then your limiting the creative department.

Man computers have linked us together but people are transferring their zombie attitude towards tv onto computers and the internet.

How many designers you knwo are aware of how a real life page is laid out? I wouldn't bet it's many.

Maybe this is an avenue that a "web-designer" or a "web-coder"
should travel as a mandatory point int heir life before even touching a a computer.

That way you get a person-to-person feel of what accessibility and usability is all about.

But you better do it soon. Otherwise you'll be sitting around with an old man who recalls eating real food, little own holding nor reading a piece of paper made from a tree. Absolute heresy it would be.

Soylent Green comes to mind, when they both sit down to dinner with real food.

Simon Mohr said on September 29, 2005

Microsoft's failiure to implement standards properly is having such a negative impact on CSS development it is driving me mad. However, is there really any point in developing for CSS compliant browsers at the moment because most end users are still using IE?

Sergio said on October 11, 2005

Here's a solution:

If you get a hard-on for CSS, by all means, stick with it and it the best you can.

If you prefer tables, just like above, stick with 'em, BUT, learn to use CSS because eventually it WILL become the standard.

If you would rather hump a penguin skull than use either css or tables then just build your sites with Flash and say to hell with html! ^_-

I've been involved in web/graphic design for 5 years now and I have to admit, I hate using css for layouts. I prefer to do everything in an 'element' style. What I mean by that is I try not to stick with just one basic layout style. I may put my content and whatnot in tables, but I use css to style the actual content and as far as Flash goes I just use it for certain things like navs or banners 'n whatnot. I'm really not crazy about full flash sites anyways.

I'm learning more and more about the layout aspect of css, but, I gotta tell ya, it's a pain in the ass trying to keep up with all the cross-compatibility nonsense. As a designer/developer you're always trying to balance user-friendliness and not going bald (I've lost quite a bit of hair in my days and I'm only 26!!). It seems there are going to be problems with everything you try to do on the web (that's why I love print so much) so instead of trying to fix yourself in one way of doing things, just try and be knowledgable in the various ways of doing things.

The advantages there are you can keep doing what you know well and be prepared for the changes that are coming rather than adopting the whole "I'll deal with it when it gets here" mentality. In the end, it doesn't matter what your personal preference may be. We are designers/programmers/developers because we choose to be and when you choose to be in any profession there's always one constant: change. If you don't adapt, you get left behind. You don't have to love it, but you do have to learn it.

- S

Jason said on October 19, 2005

OT: Love your site layout btw.

pk said on November 07, 2005

damn good layout

said on November 12, 2005

dio cane ceh figata!

Hugo said on November 13, 2005

i'll kill you!!

Hugo said on November 13, 2005

it's too much cool!!!!!!!

Groomi said on November 19, 2005

Very nice!

Alan said on November 29, 2005

This is the most ridiculouly easy layout - works in both IE and FireFox and just wnated to take a moment and say damn - I wish I could do that.

Alex said on January 06, 2006

I've always looked up to web standards as a very important factor when it comes to creating websites and it is a very bad approach because it hinders your performance as a webdeveloper constantly hearing about changes in web standards that you have to learn > master then implement into your site. The problem
is that the world wide web consortium pretty much bodged it up right from the word go and now they are slowly trying to patch up their wounds which i find fustrating. Why cant they just create one set of standards (Xhtml 1.1 + Css 2.1) then keep it like that and never change it i mean what was wrong with xhtml 1.1 that means they are going to bring out xhtml 2? also i bet xhtml 2 isnt any easier to use.

Richard said on March 01, 2006

Its a nice idea - I've tried divs instead of tables several times but the frustration of losing consistency across browsers sends me back to tables every time. I guess tables have been around so long that browsers have converged in how they render them.

I test in this order: firefox, IE, netscape opera & sometimes lynx (to check it makes sense for accessability tools) - if I'm pushed just the first two (that shoud get 90+% of my audience).

I find if it works in firefox, the HTML is in reasonable shape & doesn't need much to work in the rest.

Thanks for posting the info - it keeps us all learning out here.

HoseHead said on March 11, 2006

I have loaded the IE7 beta.
No joy on the CSS table usage.
IE sucks, install Ubuntu and live life without it and the crap that MS calls an OS. Oh, while on the subject, Vista will have a bunch of 3D desktop BS in it. All of this is already available in X with xgl.

mae said on March 22, 2006

its just what i needed! more power!

Savage said on April 05, 2006

In my view, those who rubish the w3c standards because IE still holds the market are straight up weak coders.. I have not been in the pro game for long, but i realize the potential of the css over most other standard ways of coding.. so i say GO w3c do your best to standardize the net..

Abhilasha said on April 05, 2006

WOW..thanks ...was lost with DIVS and you totally showed the way out

said on April 06, 2006

Just use tables.

Ben Pere said on April 16, 2006

Just using tables isn't a bad idea but for too many web2-applications tables will simply make life much harder - for example this POST A COMMENT floating thing here - divs allow it to allign perfectly and look perfect - table would requrie a lot of extra adjustments and lots of work in-html adjustments so that if he wanted to change it's behaviour later he would have to modify the html again - that my friend is a bad approach - leave your data in one place and your scripts and styles in another place and u'll be thanking god when u'll want to change your site's look :)

Ron said on April 17, 2006

Just one question:
I am using struts tags (display:table) the problem I am having is that when I adjust my browser size, it trunctes the left side of the table. ant ideas?

Saraistarr said on April 19, 2006

The example doesn't even work. o_O There's a convincing argument.

Jonathan Snook said on April 19, 2006

Saraistarr: which example doesn't work where?

Saraistarr said on April 19, 2006

I assumed that it wasn't supposed to look like this ---

Saraistarr said on April 19, 2006

oh, and I also didn't toally read the article... I see it now, sorry. But no, I won't stop using IE. =P

Filipe said on May 06, 2006

Huhuhu, Good look with IE then Saraistarr...

by the way, it is a nice design Jonathan, how did you make it cross-browser without lots and lots of hacks??

See ya.

Michael said on June 19, 2006

Wow a very useful site. Thanks, it has helped clear up my understanding quite a bit.

Dan said on June 19, 2006

Oh... this thing is awesome :D

Arianol said on June 23, 2006

I would love to use divs for my layout, but most times in the end it just isnt practical. Tables render the same in most all browsers, and even using them doesnt mean i have to stop using CSS!

I specify all of my cell properties in CSS, including dimensions, borders, and backgrounds. Why it is is better to use divs than table tags I dont know.

A great example is the fact that you cant center anything body level in CSS without adding a div to contain it that has a "text-align: center" property. This is a lot more code than simply adding "<table align=center>."

Not to mention my biggest complaint, which is that divs refuse to extend to the bottom of the page without being full of content, because CSS chooses to render the height of a div relative to the browser viewport instead of their parent container.

Oy, CSS is wierd. And I pity anyone who still uses IE after reading all of this.

tomas said on August 10, 2006

"Not to mention my biggest complaint, which is that divs refuse to extend to the bottom of the page without being full of content"

ever heard of

overflow: auto;


btw, I've just installed IE7 Beta just to see what css support has been added/changed: im not very surprised that the still renders wrong :D

also, they claim to have removed all the CSS hacks "available" in earlier versions which on one hand is nice and on the other sucks...

fortunately there's something called conditional comments lol (wtf cant they just make a proper css parser rather than bs-ing us with this)
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />

this way at least you can keep your IE hacks away from the normal CSS and don't worry about IE8. OMG you really think they'll fix all the craps ... i really doubt so

btw, for those who'd like some help with div layout check this out:

Jonathan Snook said on August 10, 2006

Tomas: Microsoft has said that display:table support will not be in IE7. We'll have to wait until v7.5 or 8 for that.

tomas said on August 11, 2006

thx ... but i dont really care, the only reason why i keep ie on my computer (yes there is a way to uninstall it despite what you might have heard) is to test my sites, but otherwise IE is a complete WOMBAT !!!

figgy said on October 19, 2006

To the Author:
First, a huge THANK YOU! There are a lot of people who have posted comments here whom are very critical of your strategy and direction. But none of those people asked you to post this and none paid you, I'm safely assuming. This technique is now one of my most valuable structure tools in my CSS toolbox. Awesome!!

To Some of the Posters:
It's not right to go on developing non-standard, non-compliant websites just because M$ has set up the playing field that way. You have to think of things in the long-term. Many years from now who knows how we will be developing websites? But one thing seems very likely:M$ does not care about anything but M$. Certainly, you may think I am bashing but if you take the time to study, study, study IE 6 and 7 in relation to what the rest of the world is doing, and then try to develop a website yourself using the accepted standards, you will begin to go bald from hair pulling like most designers and developers.

The Internet is a community based upon honest majority. It is very unfortunate that M$ has cheated and upset this harmony by pumping their brower to mass users through Windows-system integration and automatic online updates. Firefox and Safari for example, hold true and honest user percentages because users actually download the software.

Matt said on October 26, 2006

I have a unique situation that I'm not sure how to use divs to achieve the desired behavior.

I'm not sure if anyone here programs in .Net since they are very anti-M$. But I do program in .Net and I'm trying to use a Master page to make the addition of new pages very easy.

I want my master page to have layout with seven content areas

There would be left and right margin that would wrap the rest of the content.

In the space in the middle, there would be a top center column and then there would be a bottom center column.

In the space remaining in the middle, there would be a left center and right content area. Below is how you would use tables to draw it.

<td rowspan="3"><asp:ContentPlaceHolder ID="LeftMargin" runat="server"></asp:ContentPlaceHolder></td>
<td colspan="3"><asp:ContentPlaceHolder ID="Top" runat="server"></asp:ContentPlaceHolder></td>
<td rowspan="3"><asp:ContentPlaceHolder ID="RightMargin" runat="server"></asp:ContentPlaceHolder></td>
<td><asp:ContentPlaceHolder ID="MiddleLeft" runat="server"></asp:ContentPlaceHolder></td>
<td><asp:ContentPlaceHolder ID="Middle" runat="server"></asp:ContentPlaceHolder></td>
<td><asp:ContentPlaceHolder ID="MiddleRight" runat="server"></asp:ContentPlaceHolder></td>
<tr><td colspan="3"><asp:ContentPlaceHolder ID="Bottom" runat="server"></asp:ContentPlaceHolder></td></tr>

This table structure should allow flexbility in the widths of each particular content area.

Unfortunately 78% of my customers use IE so I have to consider them.

Is there a way to accomplish this using divs?


Peter Flynn said on October 29, 2006

Interesting, but simply faking up table behaviour by using CSS, merely to avoid hard-coding the page with table markup, seems to defeat the purpose. What I want to find out is how to stack divs reliably side-by-side in the same way as table cells, *without* using table-row or table-cell CSS, so that in a narrow window they will degrade gracefully to being stacked vertically.

Jonathan Snook said on October 29, 2006

Peter: while it may seem that simply "duplicating" things with what appears to be a table-like approach is defeating the purpose, it's only half the picture. There's still the flexibility of later dropping the use of display:table for alternative styles without needing to revise the entire HTML structure.

As to your issue specifically, I don't know of any way without JavaScript to pull off what you're looking for. With JavaScript, you'd be able to calculate each 'cell' and ensure each had the proper height so items floated properly.

Null said on December 10, 2006

doesnt work in ie7

Jarrod Roberson said on January 02, 2007

The reason to NOT use tables for layout is because the browser HAS to render the entire table at once.

So a 100 row table, cant start displaying until the 100th row is downloaded and displayed.

And with AJAX everywhere, you don't want to have to download a huge table just to update a single cell and then have to wait for the entire thing to download to display.

Tables are for tabular DATA not LAYOUT.

Jonathan Snook said on January 02, 2007

Jarrod: actually, tables can be set up to render progressively, as well. This only works if the browser knows the width of each column ahead of time (which was common during the heyday of fixed-width table-based layouts).

Null said on January 08, 2007

Can we expect an IE7 update of this? Cause it aint working in ie7 and since most people will use ie this should be fixed...

Gary said on June 27, 2007

What the W3C need to do is issue and publicise a 'Designed for web' logo certification and force the UA's into compliance. Microsoft and others couldn't display the logo until they passed their product through a W3C certification process.

This isn't 'unfair' ... microsoft themselves use a similar system for windows logo certification for applications and required compatibility certification for driver signing.

Web sites could then choose to stick with CSS WITHOUT the IE hacks... simply by referring users with non-W3C 'designed for web' browsers to a W3C standard page explaining the logo, its meaning, its importance and listing all compatible browsers which have successfully passed certification. The customer then won't see it as a site problem but a browser problem... and one which is easily rectified by following the link to the W3C list of certified browsers.

Of course, before they do this the W3C really need to firm up their spec as regards EXACTLY how various situations should be handled (There is simply too much in the W3C spec that is open to interpretation) ... they should also work on the table problem a little more until they have something far more flexible than the legacy alternative.

Perhaps then we can put away all of the hacks for good.

Whilst it is fine to say that CSS is best and Tables are bad... There should be some red lights going off when you have to include hacks that are not formalised methods. If these hacks stopped working tomorrow in distinguishing some new browser release then HOW are you going to patch up that CSS code ? And if there IS a hack? well... then your pages just become an angry mass of kludges.

Sometimes the cure is worse than the disease, this is one of those times.

Whilst I think we all pretty much agree that CSS is a good thing... at least in that it is headed in the right direction for the right reasons... no SINGLE site can afford to alienate the IE market on a whim. This is why we MUST have the W3C step in, disambiguate the standards spec, and then force compliance by way of compliance testing and certification. It should be THEIR fight and not ours as individuals.

Till then, I cannot tell ANYONE not to use tables for layout. Use it for gods sake... if the DIV's just don't cut it then email the W3C... and make sure to point out that this isn't your sites job to battle for compliance, it is theirs. Pressure them...

Once W3C introduce such a certification then the problem becomes one for the customer... not just your site. Sites en-masse will start pointing at non-standard browsers and advising alternatives that are certified. Customers will start asking why 20% of the sites they visit are declaring their browser sub-standard rather than blaming your site.

That my freinds is the fix. Not the various hacks, but to keep the customers happy with sites that 'just work (tm)' using tables if need be... whilst pressuring W3C for a stronger specification and a recogniseable browser certification programme with logo.

In the meantime I shall continue to use tables for compatability purposes whilst retaining as much of the CSS as can be considered UA-safe. I'll prefer DIV's in circumstances where they can be assured to work. And I'll be the first to drop layout tables in favour of CSS when CSS becomes a reliable option.


michael said on October 09, 2008

Nope. Chrome ain't diggin' it.

Randal Oulton said on February 11, 2009

Div's instead of tables are a pain in the ass, and flaky.

And no where on the web is there anything like a "div structure validator" to tell you where you might be going wrong.

JoinGamez said on February 28, 2011

D§??D? D?D?D′D°?€D????? D′DμD2????DoDμ D?D° 8-Dμ D?D°?€??D°?

David Stone said on March 12, 2011

>Div's instead of tables are a pain in the ass, and flaky.

I completely agree, esp. the disagreement between Dreamweaver's and browsers' rendering of div elements.

ali said on May 16, 2011

Thanks for the tutorial. It is really informative and useful. I ran into one problem though. When I try to add an img tag in the middle column before any text, the contents of the left and right columns will vertically align as if the image has been added on top of their contents.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.