CODEWITHSUNDEEP
cssoutlookhtml-tablehtml-email
SaturnsEye
SaturnsEye

Reputation: 6499

Table width is over sizing in Outlook

I am creating an email flyer but Outlook is making my two columns wider than they should be.

My flyer consists of one table divided into two columns and then two nested tables, one in each column.I created them this way so I can edit one nested table without affecting the layout of the other.

Here is an image of the problem that I have when I view it in Outlook, and you can see that the text should be where the red lines are so it runs flush down the flyer:

enter image description here

And this is how I want it to look in Outlook:

enter image description here

Here is my Fiddle.

<table id="father" width="700" border="0">
  <tr>
    <td height="666" align="left" id="column1" style="border: solid 0 #E0E0E0; border-right-width:1px;  margin-bottom:10px">

...

</table>

Not sure what's causing the problem, as I've checked widths. I know Outlook can be funny with <table>'s

Upvotes: 0

Views: 1209

Answers (1)

SaturnsEye
SaturnsEye

Reputation: 6499

Fixed the problem. I added:

table.father {
table-layout:fixed; 
}

table.father td { 
overflow: hidden; 
}

This stops the tables from forcing outwards.

Upvotes: 0

Related Questions