Creating Adaptive Table Based Floating Column Email without Media Query -


unfortunately program use send out email not allow @media queries nor .css lists @ top of said code. problematic seeing building email template based around floating columns. 2 columns next 1 while viewing on tablet or desktop, have list drop underneath content panel while viewing on mobile device.

here base of have:

<div style="width: 100%; max-width: 650px; margin-left: auto; margin-right: auto;"> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td colspan="1" style="width: 100%;"> --banner image here-- </td> </tr> </tbody> </table> <table style="width: 100%;"> <tbody> <tr> <td align="left" valign="top" width="320px;" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td> <td align="left" valign="top" width="180px;" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td> </tr> </tbody> </table> </div> 

it's doable. without media queries limited how involved get. work if columns of equal width. i'm not sure how design is, without media query challenging make columns. here roughed out html going.

<!doctype html> <html>     <head>         <meta charset="utf-8">         <title>untitled document</title>     </head>      <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">      <table width="100%" border="0" cellspacing="0" cellpadding="0">         <tr>             <td width="100%" align="center" valign="top">                         <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 650px;">                     <tr>                         <td width="650">                              <table cellpadding="0" cellspacing="0">                                      <tr>                                         <td colspan="1" style="width: 100%;"> --banner image here-- </td>                                     </tr>                              </table>                             <table align="left" width="320">                                      <tr>                                         <td align="left" valign="top" width="320" bgcolor="#00cc99" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td>                                     </tr>                              </table>                             <table align="left" width="180">                                      <tr>                                         <td align="left" valign="top" width="180" bgcolor="#99cc33" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td>                                     </tr>                              </table>                          </td>                     </tr>                 </table>             </td>         </tr>     </table>  </body> 


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -