Search code examples
html-tablehtml-emailnewsletter

How to interchange the positions of 2 blocks using anything align or float


I want to interchange the positions of two blocks using some trick for email newsletter. I want the first block to the right and second block to the left.

Tried these:

<table cellpadding="0" cellspacing="0" border="0" width="600">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0" width="300" align="right">
        content 1
      </table>
      <table cellpadding="0" cellspacing="0" border="0" width="300" align="left">
        content 2
      </table>
     </td>
   </tr>
</table>

<table>
  <tr>
    <td width="300" align="right" class="column">
      content 1
    </td>
    <td width="300" align="left" class="column">
      content 2
    </td>
  </tr>
</table>

But unfortunately none of them worked. Any other suggestion?


Solution

  • use dir="rtl" on container table and dir="ltr" on the interior tables or tds. This makes it so that the container reads the last table as the beginning and displays on left, but when stacked, it still stacks based on order of tables inside parent.

    see below:

    <table dir="rtl" cellpadding="0" cellspacing="0" border="0" width="600">
      <tr>
        <td>
          <table dir="ltr" cellpadding="0" cellspacing="0" border="0" width="300" align="right">
            content 1
          </table>
          <table dir="ltr" cellpadding="0" cellspacing="0" border="0" width="300" align="left">
            content 2
          </table>
         </td>
       </tr>
    </table>
    
    <table dir="rtl">
      <tr>
        <td dir="ltr" width="300" align="right" class="column">
          content 1
        </td>
        <td dir="ltr" width="300" align="left" class="column">
          content 2
        </td>
      </tr>
    </table>