title: HTML e-mail with fixed-width center and scaling left and right margin
body: <p>I'm trying to create an e-mail newsletter in HTML. The layout has a fixed-width (<code>600px</code>) center. If the viewport is larger than <code>600px</code> in width, there should be some decoration images on the left and the right. These images should be 'glued' to the viewport's edges:</p>
  
  <p><img src="https://i.stack.imgur.com/6w822.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/Yu52V.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>If the viewport gets too narrow, the (red) images should become fixed such that they don't overlap the (blue) center content.</p>
  
  <p>To accomplish this, I'm using <code>&lt;div&gt;</code>s with <code>auto</code> margins for the (red) images, for example: <code>margin:0 auto 0 0</code>.</p>
  
  <p><strong>This works well,</strong> except that on small devices like the iPhone, I want the e-mail client to just show the (blue) centered content:</p>
  
  <p><img src="https://i.stack.imgur.com/NsIQ8.png" alt="enter image description here"></p>
  
  <p>But the <code>&lt;div&gt;</code>s with the (red) images on the side influence the content width, so the e-mail clients show them too.</p>
  
  <p><strong>How can I achieve this?</strong> 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.</p>