Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I would simply use a table with one row and two cells, one for each column. Stack all the content in each cell.</p> <p>If you need to nest another table inside each cell to put paddings around the text, that's easy to do.</p> <p>For an example (off the top of my head, I haven't done this in a long time!)</p> <p>with single table:</p> <pre><code>&lt;table width="600"&gt; &lt;tr&gt; &lt;td width="300"&gt; &lt;img src="top_left.png"&gt;&lt;br&gt; Text goes here&lt;br&gt; &lt;img src="left.png"&gt;&lt;br&gt; &lt;img src="bottom_left.png"&gt; &lt;/td&gt; &lt;td width="300"&gt; &lt;img src="top_right.png"&gt;&lt;br&gt; &lt;img src="right.png"&gt;&lt;br&gt; More text goes here &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>or with two tables:</p> <pre><code>&lt;table width="600"&gt; &lt;tr&gt; &lt;td width="300"&gt; &lt;table&gt; &lt;tr&gt;&lt;td&gt;&lt;img src="top_left.png"&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td style="padding: 20px;"&gt;text goes here&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;img src="left.png"&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;img src="bottom_left.png"&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;td width="300"&gt; &lt;table&gt; &lt;tr&gt;&lt;td&gt;&lt;img src="top_right.png"&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;img src="right.png"&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td style="padding: 20px;"&gt;more text goes here&lt;td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>(of course I left off all the other HTML email tricks like <code>display:block</code> and widths and heights on all the images, but you can fill those in)</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload