Question 45109 in Html Question posted in
Some basic documentation can be found here.

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

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 ?

enter image description here

    <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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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;">
        <a href="#!">Link 1</a>
        <a href="#!">Link 2</a>
        <a href="#!">Link 3</a>
      </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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search