I'm currently coding up a two column email template.
I'm having a problem with Gmail.
The width of my main table is set at 600px.
The table that makes up my left column is 403px (according to dreamweaver) once the padding and everything else is taken into account.
The width of my right column is reported at 153px.
I make that a total width of 556px.
This obviously leaves massive white space between columns in every other client. If change the widths to combat this, Gmail responds by shifting my left column (which contain my main content, below the right column.
I took a quick look at your code. I think a good first step before we jump in is to make sure your code is valid, as I immediately noticed you had a missing <td> between your <tr> and the table between the lines 425 - 428. I notice you are floating your tables, I just wanted to double check that this was intentional and were you going for the dynamic 2-1 column mobile layout?
I was going to go for a fluid layout, but then changed my mind, and have decided to use media queries instead. I've set it at screen-width 800px, just for easy testing in the browser.
i'm noticing that chrome, and gmail are adding border-spacing: 2px; to my nested tables.
I'm not sure why that is.
The fix is set all images as display: block but i've done that, and I'm getting the border-spacing issue on tables without images in.
I've tried the W3C validator but it's not very good for emails as it says in line attributes like align, height, bgcolor etc.. are all invalid.
OK do you have some updated code I can test with? Display: block on your images should work great, so if you are still seeing issues there may be something else in there causing it.
Sign up for free.
Then send campaigns for as little as $9p/m