Note: When I move my blog to another server, I lost some images and links are not working. So I removed them. But the basic idea will remain the same. Feel free to reach out if you have any question.
I ran into a render issue of reverse stacking two long copy. And then finished with using media query CSS instead of "table align".
This post is used to give you a quick glance at what render issue I've met and how I deal with it.
So first, I took some time just now to google out two useful & awesome solution on dealing with the reverse stack. You should always take a quick view on these posts before you start working on your reverse stack email.
So what I originally used is "table align" by wrapping two long copy with two
tables. Put the right column at first with
align="right", and put the left column next to it with
align="left". Then put them under a
table with fixed width.
But it ends with an unexpected gap in the famous word render engine.
This is a notorious issue of word engine which I've introduced in previous post. There are lost of way to deal with it. But after I wrapped each table with a
td. The gap has gone. So I assume that side by side tables in one
td will create gap issues. But this works well when there is no such long copy in it.
So then I switched with wrapping two sibling
tds outside two
tables. Then set
display: table-header-group to the right
display: table-footer-group to the left
And then it looks fine. But you should always do a render test after you do so. Because I found that there is a known issue with using
table-xxxxxx-group. You will lose the width of the element that you attached with
table-xxxxxx-group, cause it's acting like an inline element. So the width depends on how wide the content is.