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 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 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?
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 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 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?