whitesilly whitesilly - 2 years ago 147
HTML Question

Email templates: 2 responsive divs with empty space between them

i have a problem with 2 divs that have to show right next to each other with space between them. It has to be responsive ofc and the max-width can only be 600px while the min-width has to be 280px.
It actually works as intended when i open the html in the browser, but when i send it as a mail, the two divs are right next to each other, with the space being above the second div instead of between them. Also they are fixated to the left for some reason.
How it looks in the browser (and how it should look):
enter image description here

How it looks after being sent per mail:
enter image description here

So i dont really know why it doesnt work as intended..
Also sorry for all that code, but if you test it in a browser u can see, that it works perfectly fine , which it doesnt when used as a mail template..



<div style="background: url('http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/hintergrund.png'); max-width: 700px; margin-left: auto; margin-right: auto;">
<div class="layout two-col" style="Margin: 0 auto;max-width: 600px;min-width: 280px; width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;">
<div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">
<div style="">
<div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
<img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
</div>
</div>
<div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p style="Margin-top: 0;Margin-bottom: 20px;">..........</p>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
<a href="http://www.iuno-projekt.de/aktuelles.html?view=article&amp;id=194"><img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE</a>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;">&nbsp;</div>
</div>
</div>
<div style="Float: left; max-width: 40px; width: 40px; margin-left: auto; margin-right: auto;" align="center">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;">&nbsp;</div>
</div>
<div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">

<div style="">
<div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
<img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
</div>
</div>

<div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
</div>
</div>

<div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p style="Margin-top: 0;Margin-bottom: 20px;">.........</p>
</div>
</div>

<div style="Margin-left: 20px;Margin-right: 20px;">
<div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
<a href="http://www.iuno-projekt.de/aktuelles.html?view=article&amp;id=194"><img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE</a>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>




Answer Source

As @N. Ivanov said :

Email templates do not work the same way that would a browser work. You will be best off generating a proper HTML template using the table tag rather than divs.

So for those of you who must use tables in your HTML emails , I have some information about how they perform across the board. I ran some tests and discovered that, while I couldn’t find a perfect solution, I did manage to collect some useful tips to make your tables behave for the most part.


Table Math, Meet Box-Model Math


So it turns out that when one places table widths, td widths, td padding and CSS padding into a blender, the results are quite chaotic. Inconsistent, to the say the least. Take, for example, the following table:

<table cellspacing="0" height="450" cellpadding="0" border="1px" width="400">

<tr height="100%">

<td width="100" border="1px" height="100%"></td>

<td width="300" border="1px" height="100%"></td>

</tr>

</table>

Just as intended, the resulting width of this table is 400 pixels and the width of the columns are 100 and 300 pixels:

enter image description here

But when some padding is added—via either CSS or HTML—the widths of the columns are compromised:

enter image description here

However, when table width is kissed good bye, the results are not unlike a CSS box model. If padding is added to the original example and the table widthis removed, the code looks like this:

<table cellspacing="0" height="450" cellpadding="10" border="1">

<tr>

<td width="80" height="100%" border="1"></td>

<td width="280" height="100%" border="1"></td>

</tr>

</table>

And, as intended, the resulting widths are correct for both the table and the columns:

enter image description here

But note how the td widths were reduced to accommodate the new padding. This is just like the CSS box model in which 100 pixels wide + 10 pixels padding = 120 pixels total.

**

Nested Tables

**

If a table is nested inside another, the aforementioned rules apply with the exception of a couple important variances:

  • Yahoo Mail (new), Gmail, Outlook 2007 and Eudora apply extra width to account for borders. But only when they are nested, as the parent table behaves appropriately.
  • Applying widths to td tags that also have CSS or HTML padding creates confusion across the board. Nearly every client renders the widths in its own unique fashion.
  • Even without any borders there are variances in width by 2–4 pixels for a nested table with two columns. My tests were inconclusive as to the rhyme and reason behind this unnatural phenomenon. Just know that pixel perfect isn’t an option (unless there is some hidden secret behind this).

source->

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download