Reverse stack using table-align based methods

A lot has been written before about different types of email, the table-align method is a very popular choice with email designers/developers, as it allows layout change to occur with or without a doctype being present, therefore making it a more robust method than using the column splitting method.

This means that we can stack content in android devices using table-align. One step on from that we can trigger layout change without doctype or even media queries by using the hybrid coding approach.

One of the drawbacks from this was always the impact on desktop alignment addressed here, the other problem is that we can’t reverse the stacking order very easily like we can using column split here. Well, here we have a way which appears to work pretty universally.

Simply put, it is like this:

<div class="foot">
<table align="left">
 <tr>
  <td>LEFT POD</td>
 </tr>
</table>
</div>

<div class="head">
<table align="right">
 <tr>
  <td>RIGHT POD</td>
 </tr>
</table>
</div>

So what we do is wrap a div around each pod and then tell it to behave like a table, specifically like either a header or a footer in the CSS using:

@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
*[class=head]{ display:table-header-group !important; width:100% !important;}
*[class=foot]{ display:table-footer-group !important; width:100% !important;}
}

Campaign Monitor posted a great article about centralising stacked content when optimising without media queries, and this technique can be expanded upon for reverse stacking in hybrid layouts.

Here is the codepen example of a working two column hybrid section, for you to see in action feat. Steven Segal.

It isn’t 100% perfect. There’s a really interesting glitch where if you resize the browser it may not take initially and then when the page is refreshed the head and foot swap around. But in the real world its pretty much only us #emailgeeks that are resizing emails in the browser and cheering/booing depending upon the outcome. And obviously it doesn’t reverse in the gmail app, because gmail app is laughably poor as a mail client, someone should tell them it’s nearly 2015.

 

  • Niven Ranchhod

    I’ve been testing the direction attribute as a less code invasive method to fix reverse stacking issues when ghosting in cells to tightly squeezed aligned tables and it’s working great, but I’m not sure I can update on the fly with media queries like this simple css approach.

    Then again, I don’t see any use for wanting to switch the stacking order on different screens(yet), but one to keep on hand :)

  • Mike Ragan

    Hi Niven, thanks for your comment! We have spent a good bit of time looking at the direction attribute to switch order of things and concluded that it wasn’t the one for us (for now). This approach silo’s the code and made it very straightforward (can code within the div to just be ‘normal’ so easier to convert/re-use code shape) whereas I found it could get a bit ugly down the line with direction, but that’s just me!

  • hsunami

    Interesting approach, but I’m wondering, couldn’t you just place the right aligned table above the left aligned table in the HTML? Since the right aligned table is in front, that table will stack on top of the left aligned table. What’s the benefit of your approach? The only thing I can think of is having the order of the content reversed in the plain text version, but the HTML version should still display fine.

  • hsunami

    Ah, nevermind. Realized what I said above wouldn’t work if you’re ghosting columns for Outlook spacing issues. Thanks for this solution!

  • hsunami

    For some reason I still cannot find a solution for, using the direction attribute causes a vertical white line to be inserted in the left column in Outlook 2013 only. It could be a combination of my coding style, but it caused me to abandon this method to reverse stack.

  • André Armenni

    I’ve been using the dir=”rtl” approach, and it works great for me.

  • Bill England

    I’m rather new to the email world. My challenge is to take a 3 cell, side by side, table and pop the center cell up above the left and right cells, when the media query is satisfied. Any suggestions how I might use this approach to do that or am I asking the impossible?

  • Pingback: Reverse stacking in the Gmail App | #ActionRocketLabs

  • Anna Forsberg

    I tried this code (EXACTLY the same code, I copy and pasted). But the .wrapto640px-class for Apple and Yahoo-version in desktop doesnt work (and neither does Gmail). Do you have a solution for this? :)

  • Anna Forsberg

    Never mind. It worked when I increased the size of the left table.

  • Casey B

    Hi Bill, if I’m understanding correctly, I would nest the left two cells in a cell and keep the right to the right of that cell. Have css to stack the middle on top of the left and pad the top of the right to push it down. Unless you need the middle cell to span the width of the left and right, then I would hide/show the content.

  • Nerius

    Has anyone tested this approach on Chrome and Safari browsers?

    For me, it’s not working, but Litmus showing correct stack on iPhones.