So...I tried this at StackOverflow, with no success. I have a feeling it can never be achieved, but I figure I should turn to as many people in this line of work as I can, just in case I'm completely missing something.
Well, as the title says, this is the basic structure of a mobile-friendly email template. All columns are tables set to certain percentage widths (100%, 50%, 33%, etc). Making everything a table lets the layout become a single column in mobile environments (via media queries). Unfortunately, it also produces a significant issue: columns will never stretch to the same height as the tallest neighbor.
I was ready to give up on this issue entirely until I managed to actually get it to work--but only in Firefox. My solution there used display: table; to achieve the intended effect, but IE and Chrome ignore it.
I know finding any help on this is probably a long shot, but if anyone can help guide me or provide a solution, I'd be eternally grateful. The code is below, and is also viewable here: http://jsfiddle.net/EmeraldTwilight/6KJcD/.
Eternal thanks ahead of time!
Well, as the title says, this is the basic structure of a mobile-friendly email template. All columns are tables set to certain percentage widths (100%, 50%, 33%, etc). Making everything a table lets the layout become a single column in mobile environments (via media queries). Unfortunately, it also produces a significant issue: columns will never stretch to the same height as the tallest neighbor.
I was ready to give up on this issue entirely until I managed to actually get it to work--but only in Firefox. My solution there used display: table; to achieve the intended effect, but IE and Chrome ignore it.
I know finding any help on this is probably a long shot, but if anyone can help guide me or provide a solution, I'd be eternally grateful. The code is below, and is also viewable here: http://jsfiddle.net/EmeraldTwilight/6KJcD/.
Eternal thanks ahead of time!
Code:
<!-- TEMPLATE WRAPPER -->
<div id="TemplateDiv" style="margin-left: auto; margin-right: auto; max-width: 100%; width: 600px; background-color: transparent; font-family: Tahoma, Geneva, sans-serif; display: block;vertical-align: top; font-size: 1em; ">
<!-- BEGIN TEMPLATE -->
<table class="sp_template" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 100%; width: 600px; background-color: #bamf00; display: table; vertical-align: top; ">
<tr>
<td style="width: auto; display: block;vertical-align: top;" >
<table class="sp_row" border="0" cellpadding="0" cellspacing="0" width="600px" style="width: 600px; vertical-align: top; background-color: #333; height: 100%; " align="left" height="100%">
<tr>
<td>
<!-- CONTAINER -->
<table class="sp_m_container" border="0" cellpadding="0" cellspacing="0" style="width: 50%; background-color: #F00; vertical-align: top; display: table; height: 100%;" align="left" height="100%">
<tr>
<td class="sp_section sp_section_sortable" style="width: 100%; max-width: 600px; border: 0; vertical-align: top; background-color: transparent; -webkit-text-size-adjust: 100%; padding: 6px;">
<!-- BLOCK -->
<div class="sp_block" style="vertical-align: top;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align: top;">
<tr>
<!-- CONTENT -->
<td class="sp_inner_block" style="padding: 6px; margin:0px; font-family: Tahoma, Geneva, sans-serif; color: #005c5b; -webkit-text-size-adjust: 100%; vertical-align: top;">
<div style="text-align: left; margin: 0px !important; margin-bottom: 1pt !important;">
<span class="sp_font_paragraph" style="margin-bottom: 1pt !important;font-size: 0.813em; color: #fff; ">
The worst thing about this is that it may not be fixable.</span></div>
<!-- CONTENT CLOSE -->
</td>
<!-- BLOCK CLOSE -->
</tr>
</table>
</div>
<!-- CONTAINER CLOSE -->
</td>
</tr>
</table>
<!-- CONTAINER -->
<table class="sp_m_container" border="0" cellpadding="0" cellspacing="0" style="width: 50%; background-color: #00F;vertical-align: top; display: table; height: 100%; " align="left" height="100%">
<tr>
<td class="sp_section sp_section_sortable" style="width: 100%; max-width: 600px; border: 0; vertical-align: top; background-color: transparent; -webkit-text-size-adjust: 100%; padding: 6px;">
<!-- BLOCK -->
<div class="sp_block">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<!-- CONTENT -->
<td class="sp_inner_block" style="padding: 6px; margin:0px; font-family: Tahoma, Geneva, sans-serif; color: #005c5b; -webkit-text-size-adjust: 100%;">
<div style="text-align: left; margin: 0px !important; margin-bottom: 1pt !important;">
<span class="sp_font_paragraph" style="margin-bottom: 1pt !important;font-size: 0.813em; color: #fff; ">
This sentence is here to show the issue I'm facing. When one table is taller than the other, it doesn't stretch down to match its neighbor--except in Firefox.</span></div>
<!-- CONTENT CLOSED -->
</td>
<!-- BLOCK CLOSED -->
</tr>
</table>
</div>
<!-- CONTAINER CLOSED -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>