HTML Stationery Template in Outlook

Here's my template:

Here's what I'm trying to accomplish:

Our sales guys want to have a Visit Report template that they can compose within their e-mail (Outlook).  The first thing I came up with was to create an HTML template as shown above.  

With the template as the body of the e-mail, you can click around in each different 'field' to input data.  However, the only draw back to this design, and I'm not sure if it's a limitation of trying to use HTML in this capacity or not, is that when they're putting in data say in the bottom 3 fields (the ones that are fitted to have the most data), the data doesn't wrap to the next line, but instead continues to expand into the other 2 fields and shrinks them.

If you look at the HTML code, you'll notice fixed width's on the tables and percentage based width's on the table data cells.  I have tried with both fixed width and percentage based table data cells.

Any assistance is greatly appreciated!
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ThinkPaperIT ConsultantCommented:
In your HTML, make sure to explicitly specify all your widths to pixels. You can't just have the number only.

I.E. <table border=0 width="600px">
<tr><td width="200px">blah</td></tr>

That should automatically make the widths "stick" and not smush over when you have text.

You can also use CSS if that doesn't work:

<table width="600px">
<td style="word-wrap: break-word">blah blah blah</td>


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
djhathAuthor Commented:
Tried adding the px...and coding "appropriately" with quotes and it still doesn't work.

The link has my updated code.

I don't know CSS, so I'm unfortunately at mercy for trying it.
you really don't want to use actual pixels in the width attribute of a td tag (it works, but usually only in IE).  Best bet would be to use inline styles, or with a CSS stylesheet.

instead of:
<table border=0 width="600px">
<td width="200px">blah</td>
<td width="400px">blah</td>

do it like this:
<table border=0 style="width:600px;">
<td style="width:200px">blah</td>
<td>blah in column 2</td>
here is a fantastic tutorial, on how to use CSS, as this is the way you really should be doing it
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.