title: Email - how to simulate absolute positioning
body: <p>I'm trying to place an imagem between two elements, but when it gets to an email client, it doesn't work. <br>
  Is it possible to get an absolute positioning of an element or at least simulate it with float or something else? If not, well... back to the basics then (images) <br> I have several references for a workaround, but none of them worked for me.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;style&gt;
          #news-wrapper {
              margin: 0 auto;
              width: 100%;
              max-width: 600px;
              font-family: Arial, Helvetica, sans-serif;
              position: relative;
          }
  
          #news-head {
              height: 117px;
              padding: 50.5px;
              position: relative;
              background-color: #8e8e8e;
          }
  
          .heading {
              width: 100%;
              max-width: 340px;
          }
  
          .heading h1 {
              color: white;
              font-weight: 300;
              background-color: #713235;
              padding: 9.5px;
              font-size: 24px;
              margin-top: 0;
              margin-bottom: 0;
              margin-left: auto;
              margin-right: auto;
              font-stretch: condensed;
          }
  
          .image-container {
              width: 100%;
              max-width: 263px;
              margin-top: 0;
              margin-bottom: 0;
              margin-left: auto;
              margin-right: auto;
              bottom: 50px !important;
              position: relative !important;
              left: -3% !important;
              right: 0;
              float: right;
          }
  
          #news-body {
              width: 100%;
              max-width: 555px;
              margin-top: 0;
              margin-bottom: 0;
              margin-left: auto;
              margin-right: auto;
          }
          p.default {
              color: #4c4c4e;
              font-size: 16px;
              font-weight: 300;
              line-height: 1.81;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="news-wrapper"&gt;
          &lt;div id="news-head"&gt;
              &lt;div class="heading"&gt;
                  &lt;h1&gt;Lorem ipsum dolor sit amet.&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="image-container"&gt;
              &lt;img src="http://via.placeholder.com/263x115" alt=""&gt;
          &lt;/div&gt;
          &lt;div id="news-body"&gt;
              &lt;div style="margin-top: 120px;margin-bottom: 34px"&gt;
                  &lt;h2 style="color: #713235; font-weight: 300; text-indent: 35px;"&gt;VIVAMUS VITAE METUS DOLOR&lt;/h2&gt;
                  &lt;p class="default" style="text-indent: 35px;"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus lectus vel elit posuere consequat.
                      Praesent rutrum quam ut mauris pharetra feugiat. Nunc pulvinar malesuada ante, in vestibulum ante interdum
                      eu. Aliquam malesuada aliquam nulla ut suscipit. Pellentesque habitant morbi tristique senectus et netus
                      et malesuada fames ac turpis egestas.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>