I generally agree with the idea that website layouts should run with <div> s instead of <table> s. However, I have a situation where this does not work - or at least I did not find any solution.
I have a dynamic site where many clients use the same template (they can choose one of the set of available templates). The template determines the overall layout of the site - usually the heading at the top, two or three columns (the menu on the left, the main content in the middle, and sometimes additional content on the right), and the footer at the bottom - nothing unusual. Clients have full control over the contents of the title and the contents of the right side and significant control over the contents of the menu and the main areas of content.
The thing is, I don’t know what the width of any of the columns will be. The client can have long or short text for each menu item, they can put small or large images in the column on the right, and the main content can be free for everyone. I can’t put too many design restrictions on my clients - they have their own ideas on how the site should look (some of them become uglier than the MySpace page). There is a “preferred” width for the site (the main <table> width property), so that when the content is reasonable, the site retains a pleasing appearance.
Table-based markup just handles this - no matter what columns appear, the table is suitable for matching. <div>, however, no. If the menu gets a little wider, the rest of the columns go below it. If some content is too wide for its container <div>, it passes by the border and interferes with everything near it.
I played using Javascript to adjust the width of the columns, but this causes the layout to blink, where <table> just does it without any fuss. I know about the various parameters associated with the table for the CSS display property, but since they are not sufficiently supported (naughty IE), I cannot use them. (And as snotty aside, the argument that <table> s was never intended to be used in the layout, so instead we should use <div> s - and then tell them that they behave like <table> s - it sounds funny for me.)
So, although I would like to switch to <div> -based layouts for all the usual reasons, I don’t think I can use these templates (or at least until everyone has been updated to IE 10). I hope the SO team helps me find a way to do this.