Hi all,

it's my first question here. I hope you can help me with that. I'm working on an email template. It should be responsive and the "weiter" button should always be on the bottom above the golden line. Thats why I need to have a table with 100% height, because it should be the same height or more like the image. The problem, that image will change. So I don't know any height.

Here is the code I have:


<!-- Text Links / Bild Rechts -->
                        <table width="650" border="0" cellspacing="0" cellpadding="0" class="w100">
                            <tr>
                                <td width="15" class="seitenabstand">&nbsp;</td>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <!-- Spacer -->
                                            <td height="1" style="line-height: 0px; font-size: 1"><img src="spacer.gif" width="1" height="50" /></td>
                                          </tr>
                                        <tr>
                                            <td>
                                                <!-- Titel mit Linie -->
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td align="middle">
                                                            <font style="font-family:'Lato', sans-serif; color:#be9e55; font-size:16px; text-transform: uppercase;">TEXT RECHTS / BILD LINKS</font>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <!-- Spacer -->
                                                        <td height="1" style="line-height: 0px; font-size: 1"><img src="spacer.gif" width="1" height="15" /></td>
                                                    </tr>
                                                    <tr>
                                                        <td align="middle">
                                                            <img src="trennlinie_kurz.gif" width="35" height="1" border="0" />
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                          </tr>
                                        <tr>
                                            <!-- Spacer -->
                                            <td height="1" style="line-height: 0px; font-size: 1"><img src="spacer.gif" width="1" height="30" /></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <!-- Content Container -->
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td bgcolor="#f6ecd8" height="10">
                                                            <!-- Bild -->
                                                            <table width="300" border="0" cellspacing="0" cellpadding="0" align="right" class="w100">
                                                                <tr>
                                                                    <td valign="top">
                                                                        <img src="csm_1_Schmetterling_6504ebcc38.jpg" width="300" class="img-responsive" />
                                                                    </td>
                                                                </tr>
                                                            </table>

                                                            <!-- Text -->
                                                            <table width="300" height="100%" border="0" cellspacing="0" cellpadding="0" align="left" class="w100 reset-height">
                                                                <tr>
                                                                    <td valign="top">
                                                                        <!-- Text Tabelle -->
                                                                        <table width="300" border="0" cellspacing="0" cellpadding="0" class="w100">
                                                                            <tr>
                                                                                <!-- Spacer -->
                                                                                <td height="1" style="line-height: 0px; font-size: 1"><img src="spacer.gif" width="1" height="10" /></td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td>
                                                                                    <table border="0" cellspacing="0" cellpadding="0">
                                                                                        <tr>
                                                                                            <td width="10">&nbsp;</td>
                                                                                            <td valign="top">
                                                                                                <font style="font-family:'Lato', sans-serif; color:#000000; font-size:12px;">This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit.</font>
                                                                                            </td>
                                                                                            <td width="10">&nbsp;</td>
                                                                                        </tr>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <!-- Spacer -->
                                                                    <td height="1" style="line-height: 0px; font-size: 1"><img src="spacer.gif" width="1" height="10" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <td valign="bottom" height="100%">
                                                                        <!-- Button Tabelle -->
                                                                        <table border="0" cellspacing="0" cellpadding="0">
                                                                            <tr>
                                                                                <td width="10" bgcolor="#be9e55" height="25">&nbsp;</td>
                                                                                <td bgcolor="#be9e55">
                                                                                    <font style="font-family:'Lato', sans-serif; color:#ffffff; font-size:12px;">weiter</font>
                                                                                </td>
                                                                                <td width="10" bgcolor="#be9e55">&nbsp;</td>
                                                                                <td><img src="dreieck.gif" width="25" height="25" /></td>
                                                                            </tr>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <!-- Trennlinie -->
                                                        <td height="3" bgcolor="#be9e55" style="line-height: 0px; font-size: 1">&nbsp;</td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="15" class="seitenabstand">&nbsp;</td>
                            </tr>
                        </table><!-- Text Links / Bild Rechts -->

It looks nice in Chrome, but not in Firefox. Also it looks nice in some e-mail clients, but not in the most of outlook. Does somebody has an idea or knows the solution. Would be really nice, I tried so many hours with that. Already thx for your help.

Greetings...