HTML madness - Width collapse and stubborn tables - html-table

Question

I'm trying to make a newsletter sort of thing and this piece of bovine defecation won't stay the width I specify. I've already set the width in 100 different places and whenever I preview it on Outlook it completely stretches out to infinity.
I do have a "width:100%" piece of code here but It's inside the master div, and the master div specifies the width clearly so the child element should obey this size when setting it as 100%. Should be relative to the parent element.
It's driving me crazy. I'm editing this in Joomla 1.5 to top it off, which is seemingly annoying as dgwergh. Doesn't even let me make a style section and I can't think of another free way to edit and send html newsletters to thousands of people while presenting statistics for free.
And upgrading it is annoying as egewg because I need to test it in a different domain first which I don't have.
Here's my code:
<div style="font-family: century gothic;" align="center">
<table style="width: 600px; background-color: #ffffff; display: block;" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tbody>
<tr>
<td rowspan="1" colspan="1" align="center" valign="top">
<table style="width: 600px; height: 0px;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="line-height: 0px;">
<td>
<table style="margin-top: 0;">
<tbody>
<tr style="line-height: 0px;">
<td style="line-height: 0px; height: 83px; margin-top: 0; width: 600px;"><img src="" alt="SEMINARIO-header-14julho2014" width="100%" height="auto" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="background-color: #fff; padding: 2px; width: 600px;" rowspan="1" colspan="1" align="left" valign="top" bgcolor="#000000">
<table style="width: 100%; vertical-align: middle;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0px; width: 600px;" rowspan="1" colspan="1" align="left" valign="top" width="600"></td>
</tr>
<tr>
<td style="background-color: #ffffff; width: 600px;" rowspan="1" colspan="1" align="left" valign="top" bgcolor="#FFFFFF" width="600">
<table style="display: table; width: 100%; font-family: century gothic; vertical-align: middle;" cellspacing="0" cellpadding="3" bgcolor="#888888">
<tbody>
<tr>
<td style="width: 600px; text-align: center; font-family: century gothic; color: #ffffff; vertical-align: middle;" rowspan="1" colspan="1" align="center" valign="top">
<div style="font-family: century gothic; vertical-align: middle;">
<div style="font-family: century gothic; vertical-align: middle;">
<div style="font-family: century gothic; vertical-align: middle;"><span style="font-family: 'century gothic'; font-size: 16pt;"><br /></span></div>
<div style="font-family: century gothic; vertical-align: middle;"><span style="font-family: 'century gothic'; font-size: 16pt;">SEMINÁRIO</span></div>
<p style="font-family: century gothic; font-size: 18pt; color: #eaeff4;"><strong style="color: #ffffff; background-color: transparent;">BIM & MODELAÇÃO DE ESTRUTURAS</strong><span style="color: #ffffff; font-size: 14pt; background-color: transparent;"><strong> </strong></span><span style="font-size: 16pt; color: #ffffff; background-color: transparent;"> </span></p>
<p><span style="font-size: 10pt;"> | 14 de Julho de 2014 | 15h30 - 18h30</span></p>
</div>
<div><span style="font-size: 14pt;"> </span></div>
</div>
</td>
</tr>
</tbody>
</table>
<table style="display: table; width: 100%; background-color: #efefef; font-family: century gothic; size: 8pt;" cellspacing="6" cellpadding="1">
<tbody>
<tr>
<td style="width: 600px; text-align: left; color: #000000;" rowspan="1" colspan="1" align="left" valign="top">
<div style="color: #000; font-size: 10.8pt; font-family: century gothic; text-align: justify; padding: 10px;" align="justify">
<p>Caro projectista/engenheiro,<br /><br /> <br />A convida-o a assitir e participar no seminário gratuito de BIM & Modelação de Estruturas no dia 14 de Julho, dedicado especialmente a projectistas e engenheiros, cuja preocupação é resolver a crescente necessidade de eficiência no projecto de estruturas, mantendo um elevado controlo nos procedimentos de cálculo e dimensionamento estrutural.</p>
<p>Contamos com uma participação muito significativa de pessoas que utilizam no seu dia-a-dia aplicações de modelação e cálculo de estruturas da CSI, mas também de outras empresas igualmente prestigiadas do mesmo sector. Sabemos que os softwares de cálculo estrutural progridem dia após dia, mas no entanto, muitos engenheiros e projectistas não sentem que isso reflicta directamente em acréscimo de produtividade e eficácia do trabalho.</p>
<p>Gostaríamos de poder contar com a sua presença no seminário, para lhe apresentar as nossas poderosas ferramentas de cálculo, de uso intuitivo e eficaz, as quais acreditamos ser do seu interesse.</p>
<p>As inscrições no seminário BIM & Modelação de Estruturas, a ter lugar na Universidade Lusófona do Porto, ainda estão abertas. Gostaríamos de renovar o nosso convite (caso ainda não tenha feito a inscrição), porque acreditamos que no fim, irá dar por bem investido o seu tempo. Pedimos-lhe esse tempo na certeza de que, independentemente dos programas que use, ficará com uma ideia sólida sobre as valências actuais da oferta de software de uma das empresas líderes mundiais em modelação e cálculo estrutural.</p>
<p>Assim, reenviamos o link com o programa do seminário, na expectativa de o encontrar presente neste grande evento, que irá reunir vários projectistas e engenheiros.</p>
</div>
<div style="font-family: century gothic; text-align: justify;" align="justify"> </div>
<div style="text-align: center;" align="center"> </div>
<div style="text-align: center;" align="center"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 100%;">
<table style="background-color: #507d90;">
<tbody>
<tr style="padding-bottom: 0px;">
<td style="width: 210px; height: 60px; padding-left: 5px;"><img src="" alt="csi logo" width="140" /></td>
<td style="width: 435px; height: 60px; text-align: right; color: #fff; font-weight: bold; font-size: 7pt;">
<p style="font-family: century gothic; padding-right: 5px;"><br />T: <br />E: <br />W:
</tr>
<tr>
<td style="text-justify: justify; line-height: 11px; font-family: century gothic; width: 640; padding-bottom: 20px; padding-left: 30px; padding-right: 25px; font-size: 7pt; color: #fff;" colspan="2">
<hr />
A mensagem que acabou de receber é um e-mail informativo da CSI Portugal, não devendo ser considerado como SPAM. De acordo com o Artº. 22 do Decreto lei 7/2004 de 7 de Janeiro, se o seu registo foi incluído na nossa lista de envio por erro ou se pretender simplesmente ser removido da mesma, por favor clique {unsubscribe}aqui{/unsubscribe}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Answer 1

Remove all the width: 100% you have in your code. I tried this in Outlook and it displayed the 600px-wide block in the middle of the mail, which I assume is the result you want to achieve.
Also, the width of your footer lacks an unit : I corrected it width: 640px.
See http://jsfiddle.net/w6rHj/ for the small changes.

Answer 2

That code works for me when I copy and paste it into Outlook (I assume you mean the rebranded Hotmail rather than Outlook Express).
Some bug fixing tips
Try sending it without using Joomla to see if it is Joomla or Outlook that is causing the problem.
Try inspecting the css of the wide element in Firebug to see what styles it is inheriting. Outlook styles may be overriding your styles. Firebug also allows you to turn off styles until you can spot the problematic one.
View the source of the email when it is in Outlook and see if it differs - has it changed in any way.
Also, you haven't closed your div surrounding the table in the example above. Doubt this would cause it, however.