Table problems

I am creating an email newsletter and the structure in based on tables. The layout has the body text on the left in a cell and then there is another nested table to the right of the content with 3 rows and 1 column.

Here is my problem. My content on the left is taller than the height of the three cells combined on the right. I would like the bottom cell on the right, which has a blue background, to continue to the bottom of the page so that the bottoms of the cells match up.

I have tried both setting the heights of the embedded table and the bottom cell using css and html.

This is what I have tried:
<table height="100%"> <td height="100%>

<table style="height:100%;"> <td style="height:100%;"

I would really appreciate any amount of help that you guys could give!

Have you tried to make the "bottom cell" a different row instead?

Thanks for the response!

Yeah, the 3 cells on the right are all individual rows...

I think I might try restructuring the table so that they are all in the same table... but the left content text will be in a cell that has rowspan="3" that way I think everything will stay the same height. I will update wether or not it worked.

Create a fake column.

So what you do is to create the blue background you have on the right and put it into a graphic with the same amount of white (or whatever colour you have chosen) each side of it.

Make a thin horizontal portion of this graphic and save it as a gif.

I take it from your description above you have two cells in your main table. The left hand cell and then your second table in the right hand cell.

So what you do is to place your graphic you created as a background of the right hand cell in the main table and repeat it on the y-axis.

You'll need to measure the margins of the right hand cell (and set the table so it doesn't expand).

Remove your blue background from your second table and you will have a blue background running the whole depth.

Thanks, that's a great idea!

Thanks you X-Bumble

learn from you