div multiple float left stretch

Question

I have someting like this:

<style>
 .putLeft
 {
   float: left;
 }
</style>

<table>
  <tr>
    <td>
      Some dynamic text
    </tr>
  </td>
  <tr>
    <td>
      <div id="div_1" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_2" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_3" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_4" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_n" class="putLeft">1<br/>2<br/>3<br/>4</div>
    </td>
  </tr>
</table>

The content of div_1, div_2... div_n are columns with dynamic width.

What I want is something like this:

|some text with dynamic width and can be very long text|
-------------------------------------------------------
|    div1   |      div2    |     div3    |     div4   |
|    1      |        2     |       2     |      4     |
|    1      |        2     |       2     |      4     |



But my result is something like this:

|some text with dynamic with and can be very long text|
-------------------------------------------------------
| div1 | div2 | div3 | div4 |
|  1   |   2  |   2  |   4  |
|  1   |   2  |   2  |   4  |

How can I put the "float: left" columns to stretch to maximum width?

Note: There is no fixed width in the whole example. And I can not make a table to put the div's content.

Edit: Inserted some content on divs. I did put some
to make the example simple. But it will will have other contents.

Answer 1

A jQuery example would be:

Html:

<table>
  <tr>
    <td>
      Some dynamic text
    </tr>
  </td>
  <tr>
    <td id="row">
      <div id="div_1" class="putLeft"></div>
      <div id="div_2" class="putLeft"></div>
      <div id="div_3" class="putLeft"></div>
      <div id="div_4" class="putLeft"></div>
      <div id="div_n" class="putLeft"></div>
    </td>
  </tr>
</table>

CSS:

.putLeft
 {
   float: left;
    height: 20px;
    background: #ffcc33;
 }

table { width: 100% }

JS with jQuery

$(function() {
   var count = $('#row div').length;
   $('#row div').each( function(index, item) {
       $(item).css('width', Math.floor(100 / count) + '%');
   });
});

Here is a jsFiddle: http://jsfiddle.net/qdnvq/

This can be made far more accurate by retrieving the width in 'px' from the outer <td> and then calulating pixel widths for the div's and maybe make the last one as large to bypass the missing space from rounding. Also you may use absolute positioning instead of floating.