I think you was over complicating what you wanted to achieve
I have created a simple fluid layout for you.
Using min and max widths to find the screen size and MSO conditioning statements to set the boundaries for outlook.
It was a quick creation but pretty confident it will be fine in all ISP's
There a post on MailChimp explaining all about fluid email layouts
Will Varley - I got this email
Just a very funny song about emails :)
Yeah, the fix is whenever there's a table inside a td where the parent table is 100% you need to put a align="center" on the td that surrounds it
I've fixed it.
You can find the html and previews here
You needed to nest the whole email with a table.
See what i've done here
If you put align="center" on the parent TD of your master table then that should work.
If your having problems then post your code and i could take a look for you
I don't have an explanation why what I've done has fixed it but just that it worked
<table width="640" align="center" border="0" cellspacing="0" cellpadding="0" > <tr> <td background="http://homexblogs.wpengine.netdna-cdn.com/heassets12/files/DP001-LN-004-01.jpg" bgcolor="#1e8dae" valign="middle" style="background:url(http://homexblogs.wpengine.netdna-cdn.com/heassets12/files/DP001-LN-004-01.jpg) no-repeat center;text-align: center; background-position: center center; background-size:cover;"> <!--[if mso]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;height:270px;"> <v:fill type="tile" src="http://homexblogs.wpengine.netdna-cdn.com/heassets12/files/DP001-LN-004-01.jpg" color="#1e8dae " /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!--[if mso]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="500"> <tr> <td align="center" valign="top" width="450"> <![endif]--> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:500px;"> <tr> <td valign="middle" style="color: #ffffff; text-align: center; padding: 50px 30px; font-family: 'Roboto', sans-serif; font-size: 18px; mso-line-height-rule:exactly; line-height:1.2;"> Travelling without spending a fortune isn't always easy. And sometimes you just don’t want to sleep on the sofa or stay in Aunt Barbara’s guest room (no disrespect to Aunt Barbara). <br><br> Use these clever ideas from the HomeExchange Team to make the most of your travel budget without feeling like you’re cutting corners. </td> </tr> </table> </div> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table>
Hopefully this will work for you.
The main this is that i changed the outlook conditional statement to target all of outlooks versions rather than just one rendering engine
Hope this helps