Creating Adaptive Table Based Floating Column Email without Media Query

StackOverflow https://stackoverflow.com/questions/21485108

  •  05-10-2022
  •  | 
  •  

Question

Unfortunately the program I use to send out email does not allow for @media queries nor .css lists at the top of said code. This is problematic seeing as I am building an email template based around floating columns. I would like for the two columns to be next to one another while viewing on a tablet or desktop, but have the list drop underneath the content panel while viewing on a mobile device.

Here is the base of what I 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>
Was it helpful?

Solution

It's doable. Without media queries you will be limited to how involved you get. This would work well if your columns were of equal width. I'm not sure how your design is, but without a media query it will be challenging to make even columns. Here is some roughed out HTML to get you 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>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top