Hot to make multiple element both on the left side and right side on html email? - html

Question

It should support for html email, so I can't use justify-content and align-items.
I try to use position: absolute for <img />, but It's not working on html email ?
Hot do I make the Twitter icon on the left side and on the same line with 1 2 3 for html email ?
<div
class="footer-container"
style="
position: relative;
background: pink;
position: fixed;
bottom: 0;
width: 100%;"
>
<!-- position is not working on html email -->
<div
class="image-container"
style="position: absolute; top: 30px; left: 24px"
>
<img
src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png"
alt="test"
width="94"
/>
</div>
<div
class="centered"
style="padding-top: 40px; padding-bottom: 40px; padding-right: 30px; text-align:right;"
>
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>

Answer 1

In email-templates you have limited support and as such sue techniques that are outdated or would not be semantically correct for normal HTML files.
In this case, you should use a table for layout purposes. You can shrink the table cells to their minimum content by using: style="width: 0; white-space: nowrap;"
<table width="100%">
<tr>
<td>
<img src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png" alt="test" width="94">
</td>
<td style="width: 0; white-space: nowrap;">
<a>1</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>2</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>3</a>
</td>
</tr>
</table>

Answer 2

People forget that HTML email Table can be treated as a "grid" layout by using colspan (and rowspan as well). Usually a grid of 6 columns fits best for most of the cases. Knowing you have such a grid, the top row can be constructed as such colspans, and by using text-align:
<style>
td {
border: 1px solid #ddd;
padding: 1rem;
}
</style>
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed; border-collapse: collapse; border: 0px;border-spacing: 0;">
<tbody>
<tr>
<td colspan="2">
<img src="https://i.stack.imgur.com/q9TPY.png" alt="logo" style="display: block; vertical-align: middle; border: 0;" width="57" height="48">
</td>
<td colspan="4" style="text-align: right;">
Link 1
Link 2
Link 3
</td>
</tr>
<tr>
<td colspan="6" style="text-align: center; background: gold;"><br><br>6<br><br><br></td>
</tr>
<tr>
<td colspan="3">3</td>
<td colspan="3">3</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="5" style="text-align: center; background: #567; color:#fff;">5</td>
<td colspan="1" style="text-align: center; background: #456; color:#fff;">1</td>
</tr>
</tbody>
</table>