two columns with background-image in outlook - outlook

Question

I want to create two tables that are next to each other in outlook, and they should be placed in a table with an background image.
I know that one can create a background image in an outlook email like this:
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="frame" src="image.jpg" color="#F4C046" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center">
<!-- place content here -->
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
I also know that one can create a two column table design like this:
<table width="600" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td>
<table class="full-width" width="295" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td align="left" style="font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 400; color: #000; line-height: 24px;">
hi
</td>
</tr>
</table>
<table class="full-width" width="295" align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td align="center">
<img class="img-full" src="image_1.jpg" alt="img" width="295" height="250">
</td>
</tr>
</table>
</table>
However, when I put the above table into <!-- place content here --> then the background is working, but the two tables are not next to each other, but below each other.
Is it possible to get both working in outlook?
I don't want to create a single table with two columns, because it should be responsive in addition. When I have two tables I can simply set the width of the tables to 100% with media queries.
I also tried using floats on the two tables as explained in How do I get my two tables to align beside each other?, but this is also ignored in Outlook.

Answer 1

You have two options:
Use ghost tables. The reason your tables are stacking in Outlook is because you aren't adhering to the Outlook rule of 20px gap between tables. Stupid rule, but it's a known issue.
Reduce the width of your tables to adhere the to 20px gap Outlook rule. So make both inner tables, 290px. This way, you'll avoid needing Ghost tables. But that impacts the width available to the content inside of those tables.
Honestly, Ghost tables are your best option. I use them religiously, in almost every build. These will only render in Outlook, so you won't have issues with responsiveness on mobile.

Answer 2

I have taken your code and made changes to it.
A new table added to encase your two columns.
Ghost column added for Outlook support
New table added to encase the VML and two column block
Added width and height to your VML
#media only screen and (max-width : 480px) {
.full-width{width:100% !important}
}
<table width="600" border="0" cellspacing="0" cellpadding="0" class="full-width">
<tbody>
<tr>
<td><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;width:600px;height:250px;">
<v:fill type="frame" src="image.jpg" color="#F4C046" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table width="600" border="0" cellpadding="0" cellspacing="0" class="full-width">
<tr>
<td><table class="full-width" width="300" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td align="left" style="font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 400; color: #000; line-height: 24px;"> hi </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]> </td><td align="left" valign="top" width="300"> <![endif]-->
<table class="full-width" width="300" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td align="center"><img class="img-full" src="image_1.jpg" alt="img" width="295" height="250"></td>
</tr>
</table>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</tbody>
</table>
I havent tested your VML as it has a relative path
Once you have tested the above code, let me know if this works for you.

Answer 3

What Outlook is actually doing, if you look close, is creating a "text box" and anything that goes in there is made into an image. So while this method gives you the illusion of a background image in outlook, it's really just that, an illusion. You'd be better off making an image and using that. This is probably why your tables are getting all messed. I discourage you from using this method for anything other than very simple background images.