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: http://codepen.io/actionrocket/pen/azxqmP