Positioning div in table cell

Hi,

I have a very simple problem. I want to position a div at the bottom of a table cell, well actually a table header, but the concept should be the same.

the table cells have another div, which may be of variable height, aligned to the top, followed by a second div, which I want to be aligned to the bottom.

here is a simple example…

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> crap 2 </title>
    <style>
    td {vertical-align: top;}
    th {vertical-align: top;}
    .div1{border: 1px solid red;}
    .div2{border: 1px solid blue; height: 100%;}
    </style>
</head>
<body>
 <div id="container" class="container">
  <table border="1" style="vertical-align: top;">
   <thead>
    <th> 
     <div class="div1"> blah blah </div>
     <div class="div2">div2</div>
    </th>
    <th> 
     <div class="div1"> blah <br/> blah </div>
     <div class="div2">div2</div>
    </th>
    <th> 
     <div class="div1"> blah blah </div>
     <div class="div2">div2</div>
    </th>
   </thead>
   <tbody>
    <tr>
     <td>row </td>
     <td> one </td>
     <td> one </td>
    </tr>
    <tr>
     <td>two</td>
     <td>two</td>
     <td>two</td>
    </tr>
   </tbody>
  </table>
 </div>
</body>
</html>

I want all the ‘div2’ divs to line up along the bottom on the table header. without specifying the height of the TH element, or div1.

is it possible?
Thanks.

Lachlan

hmm that would be nice, but in my real world example the HTML is bieng generated by a JSF tag library (Richfaces) so I cant really control the HTML side of things, just the CSS.

is there not a way to do this without changing the HTML?

one thought: maybe instead of two divs you could have two cells, with vertical-align top for the top cell and bottom fro the bottom cell.

maybe something like this:

<!doctype html>
<html>
<head>
    <title> crap 2 </title>
    <style>
	th { border: 1px solid black; vertical-align: top; }
	th th { vertical-align: bottom; }
    .div1 { border: 1px solid red; }
    .div2 { border: 1px solid blue; }
    </style>
</head>
<body>
  <table>
   <thead>
   
    <tr>
	<th> 
		<div class="div1"> blah blah </div>
	</th>
	    <th>
     <div class="div1"> blah <br/> blah </div>
	</th>
	    <th> 
     <div class="div1"> blah blah </div>
	</th>

	
	<tr>
     <th>
		<div class="div2">div2</div>
    </th>
	<th>
     <div class="div2">div2</div>
    </th>
		<th>
     <div class="div2">div2</div>
    </th>
	</tr>

   </thead>
  </table>
</body>
</html>