Reverse stacking in the Gmail App

AKA: reverse stacking using the table-align method 2.0; this time it’s Hybrid.

This article is another method option for reverse stacking (previous method here), this one has the advantage of working without media queries or doctype. We will still add the media queries after, but this is about raising the bar and progressively enhancing upon the base level.

I’m not big on reading – show me the code already

Essentially this is a mix of techniques we have seen over on the Campaign Monitor blog. So it’s using the RTL technique to flip the blocks, and then centring without MQ. The comments in the code should help.

1. Start with a Hybrid shell

2. Create a holding table for the 2 pods we want to reverse stack – add in style="text-align:center; font-size:0px; direction:rtl;"

3. Within this holding table create an MSO wrapper

4. Now add in each block as a table wrapped in a div. Align the first right and the second left.

5. Add a ghost column between the blocks

6. Set widths on the table blocks add dir=ltr (this is more of an insurance for when blocks contain more complex real world shapes e.g. multiple columns, that content will flip).

7. Set widths on the divs style="direction:ltr; width:320px; display: inline-block; vertical-align: top;" class="wrapto100pc" Ensure these add up to width of the wrapper exactly. Too much and will break, too little and alignment will vary. Get the calculator out if need be.

8. Add classes (if not there already) to progressively enhance for proper rendering environments.

9. Watch how your emotional status goes from Nic Cage on the left, to Nic Cage on the right when anyone mentions the gmail app.

See the code on codepen here: