I am trying to create a responsive design email layout.It's pretty basic. On a desktop, there would be two columns, but on a mobile device there would be one column.To accomplish this I have a table aligned to the left and a table aligned the right.The problem I'm having is that if I put a background color on either of these tables, and the content in each table is not exactly equal then it looks really weird.I was able to fix this in FireFox by putting height: 100%; on each column, but it does not display properly in IE.Screenshot: http://tinypic.com/view.php?pic=4nmo8&s=6Here is the CSS I'm using:\[code\]<style type="text/css"><!--.LeftColumn { background-color: #FF0000; padding: 0px 0px 0px 0px; color:#000000; font-size: 14px; font-family:Helvetica; line-height:150%; text-align:left; height: 100%; vertical-align: top;}.RightColumn { background-color: #0000FF; padding: 0px 0px 0px 0px; color:#000000; font-size: 14px; font-family:Helvetica; line-height:150%; text-align:left; height: 100%; vertical-align: top;}--></style>\[/code\]Here is the HTML:\[code\]<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin: 0px;padding: 0px;background-color: #DEE0E2;"><center><!-- Begin: Container Table Tags --> <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="Container"> <tr> <td align="center" valign="top"><!-- End: Container Table Tags --><table border="0" cellspacing="0" cellpadding="0" class="contentContainer" width="600"> <tr> <td class="secHeader"> <img src="http://stackoverflow.com/questions/15799191/banner.jpg" alt="header image placeholder" class="myImage" align="none" border="0" height="133" width="598"> </td> </tr> <tr> <td valign="top" height="100%" style="height:100%;"><!-- BEGIN LEFT COLUMN --> <table width="299" border="0" cellspacing="0" cellpadding="0" align="left" class="LeftColumn"> <tr> <td valign="top"><!-- BEGIN ARTICLE --> <table width="100%" border="0" cellspacing="0" cellpadding="7" class="Article"> <tr> <td> <h1>Article Headline</h1> <p>Article text goes here.</p> </td> </tr> </table><!-- END ARTICLE --> </td> </tr></table> <!-- END LEFT COLUMN --> <!-- BEGIN RIGHT COLUMN --> <table width="299" border="0" cellspacing="0" cellpadding="0" align="right" class="RightColumn"> <tr> <td valign="top"> <!-- BEGIN RIGHT COLUMN --> <!-- BEGIN ARTICLE --> <table width="100%" border="0" cellspacing="0" cellpadding="7" class="Article"> <tr> <td> <h1>Article Headline Goes Here</h1> <p>Article text goes here.</p> <p>Article text goes here.</p> <p>Article text goes here.</p> <p>Article text goes here.</p> </td> </tr> </table><!-- END ARTICLE --> <!-- END RIGHT COLUMN --> </td> </tr></table> <!-- END RIGHT COLUMN --> <!-- Begin: Closing contentContainer Tags --> </td> </tr></table> <!-- End: Closing contentContainer Tags --> <!-- Begin: Closing Container Table --> </td> </tr></table><!-- End: Closing Container Table --></center></body></html>\[/code\]Note: I slimmed down the HTML to focus on just the problem.Any insight or ideas is greatly appreciated! My goal is to find a solution so that it displays properly in all browsers, while still maintaining the responsive design.Thanks in advance!
Responsive Email Design: Getting tables to fit 100% height cross-browser
- Thread starter zubair
- Start date