HTML Email - Aligning content vertically - css

Question

I'm new to this forum and I apologise in the advance in case this question has already been solved somewhere else, I couldn't really find anything helpful.
I'm coding a simple HTML template to be used on a dynamic platform where my clients can add the content by themselves.
The template has 3 stories on the bottom part which must stay vertically alined no matter how long is the content of each story.
Ideally I would need the longer story to determinate the height of the entire block.
No problem so far.
The problems comes because due to the dynamic platform I need to keep the content of a single story within a specific dynamic tag and at the same time I need to find a way where the longest story determinate the height of the other two stories.
EDIT Just to clarify: I need the "Read More" cell to be always alined to the bottom, the top picture always alined to the top while the title and the description cells height might vary.
here is the structure of my code. I would be very grateful to any suggestions.
<table width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<DYNAMIC TAG>
<table width="195" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/image.jpg"/></td>
</tr>
<tr>
<td>Title </td>
</tr>
<tr>
<td>Text</td>
</tr>
<tr>
<td>Read More</td>
</tr>
</table>
</DYNAMIC TAG>
</td>
<td width="22"> </td>
<td width="195" valign="top">
<DYNAMIC TAG>
<table width="195" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/image.jpg"/></td>
</tr>
<tr>
<td>Title </td>
</tr>
<tr>
<td>Text</td>
</tr>
<tr>
<td>Read More</td>
</tr>
</table>
</DYNAMIC TAG>
</td>
<td width="23"> </td>
<td width="195" valign="top">
<DYNAMIC TAG>
<table width="195" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/image.jpg"/></td>
</tr>
<tr>
<td>Title </td>
</tr>
<tr>
<td>Text</td>
</tr>
<tr>
<td>Read More</td>
</tr>
</table>
</DYNAMIC TAG>
</td>
</tr>
</table>
I hope I was clear and everything make sense, and I tank you already for your help.
Have a lovely day,
Eleonora.

Answer 1

Ultimately the stories can only be as long as the content itself, but a table row will keep all cells in that row the same height:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#858585" valign="top">Section 1
</td>
<td width="200" bgcolor="#656565" valign="top">Section 2
</td>
<td width="200" bgcolor="#454545" valign="top">Section 3<br>
This sets the height of all 3.<br>...<br>...<br>...<br>...
</td>
</tr>
</table>
You are currently nesting a table inside each of these table cells - the table is independent so they will expand as needed, causing 3 tables with different heights. This would be invisible unless you were adding a background color or border to the table. In that case, instead of applying it to the nested table, apply it to the parent table cells.
If you want all content to 'float' at the bottom of the equal height table cells, change the valign attribute for each cell to valign="bottom"
UPDATE:
Thanks for the clarification - The issue is that you want to valign to the top and bottom within the same cell, which can't be done. Forcing 100% height isn't really supported either, so nesting a 100% height table with 2 rows (content then read me) won't work.
There are 2 ways I can think of (besides setting a fixed heights). One is pretty straight forward, and one is more out-the-box thinking.
Method 1:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#858585" valign="top">Section 1<br>...<br>...<br>...
</td>
<td width="200" bgcolor="#656565" valign="top">Section 2<br>...<br>...
</td>
<td width="200" bgcolor="#454545" valign="top">Section 3<br>
This sets the height of all 3.<br>...<br>...<br>...<br>...<br>
</td>
</tr>
<tr>
<td width="200" bgcolor="#858585" valign="top">Read More
</td>
<td width="200" bgcolor="#656565" valign="top">Read More
</td>
<td width="200" bgcolor="#454545" valign="top">Read More
</td>
</tr>
</table>
Drawback with this method is that your read me links are not immediately following the story in the code.
Method 2:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#858585" valign="top">Section 1<br>...<br>...<br>...
</td>
<td width="400" valign="top" rowspan="2">
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#656565" valign="top">Section 2<br>...<br>...
</td>
<td width="200" valign="top" rowspan="2">
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#454545" valign="top">Section 3<br>
This sets the height of all 3.<br>...<br>...<br>...<br>...<br>
</td>
</tr>
<tr>
<td width="200" bgcolor="#454545" valign="bottom">Read More
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="200" bgcolor="#656565" valign="bottom">Read More
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="200" bgcolor="#858585" valign="bottom">Read More
</td>
</tr>
</table>
The tables are nested so that they are driven by the 'grandchild' or a pre-determined biggest. Drawback is that this only works if you know which section is going to be the largest. The way this particular example is set up, the third table needs to have more content than the first two, but you could alternatively build it with either other section being the 'always biggest'.
I'm sure neither option is ideal, but unfortunately that is the best you can do with the limitations of cross-client supported html-email.