I'm charged with 'rebranding' our IT department communications. I wanted to do our email notifications in pure HTML / CSS to ensure it's portability.

Below is the code, which looks exactly how I want it to in Outlook, however as soon as content is added to the main the words wont wrap correctly and if any content goes further than about 90% of the main content window, the other table components start to stretch!

I've tried all sorts of combinations of 'word-wrap' and 'overflow' at all levels in the table but I can't seem to have it.

My end goal is to have the entire table fixed width, with any long format information expanding down.

```
<table style="width: 550px; border: 1px solid gray; border-collapse: collapse; font-family: Arial; color: #282828;">
  <tr style="border: 1px solid gray;">
        <td style="height: 75px; width: 80px; text-align: center; font-size: 60px; font-weight: bold; color: White; background : #007F0E;border-bottom: 1px solid gray;">i</td>
        <td style="height: 75px; padding-left: 15px; font-size: 22px;font-weight: bold;border-bottom: 1px solid gray; color: #282828;">Information</td>
        <td style="height: 75px; padding-right: 15px; text-align: right; font-weight: bold; border-bottom: 1px solid gray;">
          <table>
            <tr>
              <td><div style="height: 36; text-align: right; font-weight: bold; font-size: 18px; color: #0088CE">company name</div></td>
            </tr>
            <tr>
              <td><div style="height: 36;text-align: right; font-size: 22px;font-weight: bold; color: #282828;">Information Systems</div></td>
            </tr>
          </table>
        </td>
        <td style="width: 20px; background : #007F0E;border-bottom: 1px solid gray;"></td>
    </tr>
    <tr>
      <td colspan="99" style="font-family: Arial; height : 300px; padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px; vertical-align: top; text-align: left;">This is the main TD</td>
    </tr>
    <tr>
        <td colspan="99" style="background: #EEEEEE;font-size: 12px; text-align: center; height : 20px; border-Top: 1px solid gray;"><b>IT Helpdesk </b><b style="color: #0088CE">&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;</b><b>Ext : </b> <a href="">XXXX</a><b style="color: #0088CE">&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;</b><b>Email : </b> <a href="mailto:">Link</a><b style="color: #0088CE">&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;</b><b> Portal : </b> <a href="">Link</a></td>
    </tr>
</table>

```

Any help is greatly appreciated, this one minor issue is taking me way to long to overcome!

Good:

[![Good](https://i.stack.imgur.com/VLqcm.jpg)](https://i.stack.imgur.com/VLqcm.jpg)

Bad (this is just random, wordwrapped text):

[![Bad](https://i.stack.imgur.com/4IBcR.jpg)](https://i.stack.imgur.com/4IBcR.jpg)