I create dynamic HTML pages with 3 columns. Each column can contain a variable amount of text - from 0 to 1000 words. I want the text in the 3 columns look approximately the same height. So, I want to have the column widths change automatically according to the amount of text they contain.
In HTML, this happens automatically in a table, when each cell has a single div of text, see the top table here:
http://jsfiddle.net/erelsgl/RJa2k/3/
However, when the table cells contain several divs, this doesn't work anymore, see the bottom table there. The leftmost column is very narrow and tall, instead of being wider and shorter.
Adding a "width" attribute to the leftmost table column (by clicking the button) shows the expected result. However, I do not know in advance what column should be what width.
Is it possible to have it adjusted automatically? Either using a DIV or using a TABLE or some other element?
NOTE: It is not required that the solution conform to web standards, or that it looks good in all browsers - it's enough if it works well in the latest versions of Firefox and/or Chrome.