Question

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 first table here:
http://tora.us.fm/_script/demotables.html

However, when the cells contain several divs, this doesn’t work anymore, see the second 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?

A jsfiddle: http://jsfiddle.net/erelsgl/RJa2k/5/

Answer 1

With the help of my friend, Eden Erez, I found a hack that partly solves the problem:

• In each TD, print the content a second time – inside a special div, like this:

  < td >
   < div class='autowidth' >
       $content
   < /div >
   $content
  < /td >
  

• In the stylesheet, insert this:

  .autowidth {visibility:hidden;}
  .autowidth * {display:inline;}
  

In some of the cases, this will make the browser set the column widths as though they are single-paragraph, but still display them as multi-paragraph. See an example here:
http://jsfiddle.net/erelsgl/RJa2k/76/

This works surprisingly good in most cases.