Positioning text within a table in HTML email - html

Question

I am producing a personalised HTML email which has already been designed. I have coded the email with all the content placed within a table. I need to place text in three different areas in one row in a kind of scattered way. I tried placing the text into a div within the table row and styling it using inline CSS however, when i tested it on emailonacid (email testing website) it doesn't display correctly on the different email programs. Is there a way i can do this so that it works for all email programs?
I would like to position the text like so:
http://i754.photobucket.com/albums/xx182/rache_R/image_zps0604dece.jpg
The black boxes is where the images are.
<tr>
<td>
<div id="cambelts" style="margin-top: -30px;text-transform: uppercase; position: relative; top: 80px; left: 170px;">This is text 1
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
<img src="images/Untitled-1_04.jpg" width="800" height="418" alt="">
<div id="Accessory_Belt_kits" style="text-transform: uppercase; position: relative; top: -235px; left: 20px;">This is text 2
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
<div id="Water_Pumps" style="text-transform: uppercase; float: right; position: relative; top: -80px; right: 40px;">This is text 3
<br/>
<span style="font-weight: bold;">£#XX.XX#</span></div>
</td>
</tr>

Answer 1

You should not concentrate with fancy CSS tricks in E-mail. Email should be more about content and less about CSS positioning and gimmicks.
Having said that Email clients do support certain CSS attributes.
Click here to check which attributes are supported by different Email clients.
Also here is a tool which can allow you to see how your email will be rendered in different E-mail clients.
So my advice is instead of trying to hack your way into getting your content displayed , focus more on what the end user will see rather than how he see's it.

Answer 2

Instead of using CSS, you can also add the another table in the row to adjust the text position. This way you can manage the text position easily.
Set the border of the table to zero (<table border="0">) to make it invisible if necessary.

Answer 3

I am fairly new to creating HTML emails but I have found that not all CSS code really works across all email clients so it is better to stick with as much HTML as possible.
One way you could accomplish this is a table with two columns. In the left column you have text 1 and 3 then in the right column you have text 2. In order to create the spacing, you will need to include empty "cells" that give the spacing.
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="290">
<table align="center">
<tr>
<td>
<h1>Text 1</h1>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
<tr>
<td>
<h1>Text 2</h1>
</td>
</tr>
</table>
</td>
<td width="20">
</td>
<td width="290">
<table align="center">
<tr>
<td height="20">
</td>
</tr>
<tr>
<td height="20">
<h1>Text 2</h1>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
</td>
</tr>
</table>
This should give you a solid base to work with and all email clients will render tables properly.