Absolute positioning in gmail emails

(I know I'm answering 4 years later... but probably it will help somebody...) If you look carefully, you don't have background images, you have possibly 10 images or more, many background colors and a complex table.

There's no image behind a text. You could divide your table and compose your background image as multiple image fragments, and match the text's background color with these images.

Really... in this template there are no "required" background images, just a complex table.

Please note that is not a foolproof solution. I had some problems with it on Outlook and need to disable it.

So first of all you need to set a container to position against.

<div style="width:300px;height:300px;">  
</div>  

Then place an element inside that, set display as inline-block and position it with margin-top and margin-left.

<div style="width:300px;height:300px;">  
    <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
    </div>
</div> 

N.B. Unfortunately negative values in the margin won't work in Gmail, Outlook.com or 365.

The element is now behaving similar to position:relative but we want position:absolute so as not to affect the flow of any neighbouring elements. To achieve this wrap the inner element in a div with max-height:0;max-width:0 this now mean that div takes up no space on the page, but the overflow can still be seen.

<div style="width:300px;height:300px;">  
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
        </div>
    </div>
</div> 

You can now place multiple elements in that container and position them absolute. In this example I've added outlines and semi transparent background colours to clear display the outcome.

<div style="width:300px;height:300px;outline:2px solid black;margin:0 auto;">  
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;outline:2px solid red;text-align:center;line-height:100px;font-size:50px;background:rgba(255,0,0,0.2)">
            1
        </div>
    </div>
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:150px;margin-left:150px;display:inline-block;outline:2px solid blue;text-align:center;line-height:100px;font-size:50px;background:rgba(0,0,255,0.2)">
            2
        </div>
    </div>
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:50px;margin-left:50px;display:inline-block;outline:2px solid green;text-align:center;line-height:100px;font-size:50px;background:rgba(0,255,0,0.2)">
            3
        </div>
    </div>
</div> 

Outlook

Ok so it still doesn't work in desktop Outlook but it does work pretty much everywhere else I've test.

But please do use this wisely. Do consider Outlook, perhaps a VML fallback or simply using Outlook conditional comments.

Source: https://web.archive.org/web/20170824110806/http://blog.gorebel.com/absolute-positioning-in-email

Unfortunately, you can't use position: absolute.

Also, because Outlook is using the Word HTML renderer, you will also run into problems using absolute positioning.

Most HTML emails are laid out with tables.

Check this out.

I would suggest doing the whole thing as a table (div support is not 100% reliable in email clients). Use border properties to give the table the green border. Insert the image of the logo/banner in the first row of the table (merged three columns). Use the next 3 rows for the To, From and Amount (with the values in the merged second and third columns). And use the last column of the last row for the cupon code.

If you really want the double border then you can either wrap the table in a div or for maximum compatibility, wrap the table in a 1 column, 1 row table.

Yes it's ugly but email clients have extremely buggy and/or old implementations of HTML so this is not the time or place to be squirmish about ugly, non-web2.0-looking code.

See the link posted by alex for more info.