<table> vs <div> (yet again)

Question

I generally agree with the idea that web site layouts should be done with <div>s instead of <table>s. However, I have a situation where this does not work - or at least, I have not found any solution.

I have a dynamic site where many customers share the same template (they can pick one from a set of available templates). A template defines the general layout of the site - typically header at the top, two or three columns (menu on the left, primary content in the middle, and sometimes additional content on the right), and footer at the bottom - nothing fancy. The customers have complete control over the contents of the header and the right side content, and significant control over the contents of the menu and main content areas.

The point here is that I do not know what the width of any of the columns will be. The customer may have long or short text for each menu item, they may put small or large images in the right-side column, and the main content can be a free-for-all. I cannot impose too many design restrictions on my customers - they have their own ideas on what the site should look like (some of them get uglier than a MySpace page). There is a 'preferred' width for the site (the main <table> width property) so that when the content is reasonable, the site maintains a nice appearance.

A table based layout just handles this - whatever sizes the columns turn out to be, the table adjusts to fit. <div>s however, do not. If the menu gets a little wider, the other columns drop down below it. If some content is too wide for its container <div>, it extends past the border and interferes with whatever is next to it.

I have played with using Javascript to adjust column widths, but this causes flashing of the layout, where a <table> just renders it without any fuss. I know about the various table-related options for the CSS display property, but since they are not supported widely enough (naughty IE) I can't use them. (And as a snotty aside, the argument that <table>s were never intended to be used for layout, so instead we should use <div>s - and then tell them to behave like <table>s - sounds funny to me.)

So, while I would like to switch to <div>-based layouts for all the usual reasons, I don't believe I can for these templates (or, at least, not until everyone upgrades to IE 10). I am hoping the SO gang can help me find a way to do this.

Answer 1

You could make an argument that in your case, the layout essentially is a table after all. Often, the point in <div>'s is that the precise layout doesn't matter that much. It has to be adaptable. If the screen size changes so that your original layout isn't possible, the browser tries to shuffle the elements around to get something that still works. That's one reason why <div>'s are usually preferred.

In your case, you want to give that control to the user. And then it is effectively a table, where they get to choose the dimensions and contents of every cell. The fact that it ends up looking like a webpage is almost coincidental.

You're not designing a web page. If you were, you should (and could) use <div>'s. You're creating a table, which your users can fill in with the content they like.

I'm sure some purists will disagree with this answer, but ultimately, the rule is not "never use <table>, but simply "never use <table> for layout". And you're not using it for layout. You're using it to provide a fixed structure for your users to fill data into.