2

I'm trying to create an e-mail newsletter in HTML. The layout has a fixed-width (600px) center. If the viewport is larger than 600px in width, there should be some decoration images on the left and the right. These images should be 'glued' to the viewport's edges:

enter image description here

enter image description here

As you can see, when the viewport scales, the fixed-width (blue) content stays centered, but the (red) images on the left and on the right are moving with the viewport's edges.

If the viewport gets too narrow, the (red) images should become fixed such that they don't overlap the (blue) center content.

To accomplish this, I'm using <div>s with auto margins for the (red) images, for example: margin:0 auto 0 0.

This works well, except that on small devices like the iPhone, I want the e-mail client to just show the (blue) centered content:

enter image description here

But the <div>s with the (red) images on the side influence the content width, so the e-mail clients show them too.

How can I achieve this? Using Javascript and/or CSS media queries is not an option, since most e-mail clients strip CSS and JS from the e-mail HTML.

Jonas Sourlier
  • 13,684
  • 16
  • 77
  • 148
  • Would a minimal answer that requires CSS (but no media queries) work for you? All the table-oriented answers I'm seeing are making me cringe. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Michelle Nov 05 '13 at 19:38
  • 1
    CSS is okay, as long as it can be embedded in `style="..."` attributes. I cannot use ` – Jonas Sourlier Nov 05 '13 at 19:40
  • I'm already using that, see my post. – Jonas Sourlier Nov 05 '13 at 20:29

4 Answers4

5

You should use tables.

You'll need 3 tables for that.

First, the good old centering table:

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">

Then, another centering table of 3 columns in percents:

    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="15%" align="left" valign="middle">YOUR LEFT CONTENT HERE</td>
    <td width="70%" align="center"> YOUR MAIN CONTENT TABLE HERE </td>
    <td width="15%" align="right" valign="middle">YOUR RIGHT CONTENT HERE</td>

And, in the middle TD of the previous center, you can put your 600px wide main content table.

This might need some styling tweaks with floats and block elements aligns, but the basic structure is there.

*Table 2 is nested in table 1's main TD cell.

For mobile mail clients, just put a class on the two LEFT and RIGHT tds, then have them display:none; in your media query. Since the content will be nested inside those, it will inherit the display none and your 3 columns table will effectively become a single column one.

R Lacorne
  • 604
  • 5
  • 10
  • Thanks for you answer, I'm gonna try your suggestions. As for your suggestion on using media queries: The problem is that many e-mail clients (like for example Gmail) don't allow CSS or media queries. They'll strip all ` – Jonas Sourlier Nov 05 '13 at 19:39
  • Indeed, that's a problem. The suggested solution of using background images in your %ted side TDs can overcome that, but not every mail client displays background images in tables. You'll have to study what your customers use most and build for those first, I guess. – R Lacorne Nov 05 '13 at 19:46
2

This is not possible without media queries. There is no way to get the left and right columns to pop or hide on resize. Even if you used a float/align technique, it would just pop the right side only (then center with the left above).

I would suggest a fluid table with a max width div to keep your main content at 600px.

 <style>
    @media only screen and (min-device-width: 600px) { /* don't over stretch */
      .main {
        width:600px !important;
      }
    }
</style>

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td width="15%" align="left">left
    </td>
    <td width="70%" align="center">
      <div class="main" style="max-width:600px !important;">
        <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
          <tr>
            <td>
              center
            </td>
          </tr>
        </table>
      </div>
    </td>
    <td width="15%" align="right">right
    </td>
  </tr>
</table>
John
  • 11,985
  • 3
  • 45
  • 60
  • Ah yeah, the max-width div nested inside a % TD, that's a good trick actually... I might want to use that in a future campaign. Hmmm mmm – R Lacorne Nov 05 '13 at 20:05
  • I'm actually working on a fluid template ATM that uses this technique (minus the sidebars). It is far superior to media query driven designs. Especially because it looks spectacular in Gmail for Android devices. @RLacorne – John Nov 05 '13 at 20:13
  • And lord knows that gmail and spectacular rarely go in the same sentence about html-emails ... Well, I'll bookmark this page and use it soon, if the occasion arises! @John – R Lacorne Nov 05 '13 at 20:16
  • You could use this without the media query at the top - it is just a fallback as max-width isn't fully supported. – John Nov 05 '13 at 20:36
  • 1
    Also, you'd still have to add media queries to hide/toggle your sidebars. Because media queries are not 100% supported, you might want to consider hiding the sidebars by default and make them visible in a broad media query. You are not going to get 100% consistency across clients, so you need to make a decision on how you want to compromise in Gmail/non-media query clients. Cutting your loses and hiding the side bars in Gmail on desktop may be better than the overlapping or squeezing of the sidebars and content in mobile (which wouldn't hide due to lack of MC support). – John Nov 05 '13 at 20:37
1

What about a table where the middle cell has a fixed width and the other two cells have a) either a background image aligned to either side, or b) have an image with overflow:hidden on the cells?

ravb79
  • 722
  • 5
  • 8
  • I had a look at http://www.campaignmonitor.com/css/ and figured you could create a sort of hybrid of my aforementioned techniques to reach as many clients as possible (by making clever use of the display attr., for example, clients that don't support it won't apply it). – ravb79 Nov 05 '13 at 21:02
-1

Here's a more minimal solution to what you want to achieve.

For the red elements, you can continue to set their positions with margin: 0 auto 0 0... etc, but include this CSS:

width: 0;
overflow: visible;
z-index: 1;

This way, the red elements won't "clash" with the blue <div> when they "meet".

For the blue <div>, declare a higher z-index:

z-index: 2;

Because the z-index of the blue is higher than the red, the red elements will hide underneath the blue element when they "overlap".

Note: gmail does not yet support z-index (source), but you could look into creating the same effect through default stacking.

Side notes:

It REALLY does not have to get as complex as using tables. Read: Why not use tables for layout in HTML?

Community
  • 1
  • 1
Michelle
  • 2,702
  • 2
  • 23
  • 35
  • Yeah, but he's doing html-email. Tables are still the most stable way to produce those. And gmail has no support of z-index. – R Lacorne Nov 05 '13 at 19:56
  • Also, outlook.com does not understand margins. http://www.campaignmonitor.com/css/ – R Lacorne Nov 05 '13 at 20:00
  • http://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/ Here, it explains why tables are still needed for html-emails. – R Lacorne Nov 05 '13 at 20:04
  • @Michelle html-email is very different to web html. Simply suggesting to not use tables is miles off base. Overflow, z-index and margin should all be avoided as they do not work across the bulk of major email clients. – John Nov 05 '13 at 20:09
  • Tables aren't the best way to achieve this. First of all, if you're using tables to do it, you'll need to use media queries, which is not as widely supported as the CSS style attributes I posted. OP also specified that he/she didn't want to use media queries. – Michelle Nov 05 '13 at 20:11
  • Nope, in 2013. Overflow is supported for almost all email clients, just not `overflow: hidden`. `z-index` is only unsupported in gmail, but the same effect can be achieved through default stacking properties: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index?redirectlocale=en-US&redirectslug=CSS%2FUnderstanding_z-index%2FStacking_without_z-index – Michelle Nov 05 '13 at 20:16
  • Do you have an example we can test? We can run it through Litmus or Email on Acid. I'd really like for you to be right... – John Nov 05 '13 at 20:18
  • I'm basing it off this: http://www.campaignmonitor.com/css/ If you are talking about default stacking properties, there are many ways to do it. According to w3c, simply declaring the element as inline gives it a higher stacking order. I would love to test out some examples, but elsewhere. Don't want to derail this. – Michelle Nov 05 '13 at 20:30
  • @john no indexes being used here... seems like the browser has given the main div a higher stacking order already http://jsfiddle.net/3wKfy/ – Michelle Nov 05 '13 at 20:40
  • @Michelle Do you have an example as a basic but complete email document? html and doc tags, style tags containing the css etc. – John Nov 05 '13 at 20:45
  • @Michelle So far, from what I tested, it comes off as unstyled in gmail (Even if I put the styles inline), Overlapped by default on outlook.com (Even if I maximize the screen size) and while the divs overlap correctly in apple mail, the text doesn't. Both stackings of text are above the div backgrounds, meaning you see the two texts all the time. – R Lacorne Nov 05 '13 at 20:48
  • Then again, I've sent it form Safari. I'd have to test from a real campaign sender like cakemail to see how it really goes. – R Lacorne Nov 05 '13 at 21:00
  • So, I did some more testing and managed to have some style for gmail, and here are the results, built with proper mail doctypes: http://dev.test-remi.sextans.com/img/apple.png http://dev.test-remi.sextans.com/img/outlook.png and http://dev.test-remi.sextans.com/img/gmail.png @John – R Lacorne Nov 05 '13 at 21:20
  • Same problems, I have some updated screenshots for gmail and outlook. outlook: http://dev.test-remi.sextans.com/img/outlook2.png and gmail: http://dev.test-remi.sextans.com/img/gmail2.png @John – R Lacorne Nov 05 '13 at 21:27
  • @RLacorne I sent this out using mailchimp, and it's working on Gmail, airmail, my iphone, and iPad. Don't have outlook though. Let me know how it looks through yours http://jsfiddle.net/3wKfy/2/ – Michelle Nov 05 '13 at 22:04
  • Outlook.com still renders the same : http://dev.test-remi.sextans.com/img/outlook3.png , while gmail can't display background-images in divs, so it won't show the smily face. – R Lacorne Nov 05 '13 at 22:11