Hi all -

 I have a very simple HTML email that is sent out whenever we ship a given job. The email is basically a single table with two columns... I'd like the left-most column to have a fixed width while the right column dynamically expands to fill the remaining space (width="100%" or something to that effect). Anyway, I've tried a bunch of approaches - leaving the right column without a width attribute and defining the left column as fixed with via CSS and / or the table's "width" attribute, giving the right column a % width attribute (via css and the table tags), etc... 

Outlook 2003 always messes up the table display (see attached screenshots) - it constrains the text within the fixed width column to the set width but paints the borders as though the columns were set to width=50%.

Any ideas on how to fix?

3 answers

0
points
This was chosen as the best answer

I got it to work. I gave the table a width of 100%, the cell on the left a width of 200px and the cell on the right no width.

See Litmus test.

Here is my source code.

And a quick code snippet:

<table cellspacing="10" width="100%">
<tr>
<td width="200" valign="top"><h2>Sidebar</h2></td>
<td valign="top"><h2>Article</h2></td>
</tr>
</table>
Answered about 4 years ago by Justin Jackson
  • Nice!... but... if you add: <tr> <td align="left" colspan="2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</p> </td> </tr> It breaks (which I guess is my *real* problem... *slaps forehead*... sorry for not being specific) http://scpcb.litmusapp.com/pub/c758886 Matthew Mirande about 4 years ago
Jordan 469
1
point

E-mails clients don't respond well to external style sheets, or the use of divs. In fact, clients tend to strip out anything within the <head></head> tags. What you should do to make it render properly is change all your divs to tables, and switch your external css to inline CSS. Also I noticed you have a bit of Javascript in your code as well. This will also be ignored by the email clients as well, so you might want to think of changing that. Here is a email guide to assist you.

For your specific situation, I would recommend using nested tables (a table within a table). Something like this:

    <table width="100%" border="1">
  <tr>
    <td>
    <table width="100%" border="1"  style="table-layout:fixed;">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</td>
<td>
<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</td>
  </tr>
</table>

Hope this helps.

Answered about 4 years ago by Jordan
  • I'm actually already running a variant of the example you posted... see my follow-up post. Matthew Mirande about 4 years ago
0
points

Thanks Jordan. A couple of corrections: My email is pure html & css. What little CSS is there is placed inline (as opposed to external or in the head). I initially forgot to pull out the content tags... which may have led you to believe I had javascript int here as well... I don't. The issue is that this:

<table>
<tr>
<td width="200"></td>
<td width="100%"></td>
</tr>
</table>

Doesn't work in Outlook 2003 (the content is constrained in the left column to the 200px width but the table borders are set as though the width="50%" - as shown in the Litmus screengrab there). Likewise, this gives the same result:

<table>
<tr>
<td width="200"></td>
<td></td>
</tr>
</table>

...as does this:

<table>
<tr>
<td style="width:200px;"></td>
<td></td>
</tr>
</table>

...and this:

<table>
<tr>
<td style="width:200px;"></td>
<td style="width:100%;"></td>
</tr>
</table>

The only thing that sort of works is:

<table width="800">
<tr>
<td width="200"></td>
<td width="600"></td>
</tr>
</table>

...of course this has a fixed width which is what I'd like to avoid (I only need my left column to be fixed)

Anyway, thanks again!

Answered about 4 years ago by Matthew Mirande