[Outlook 2007] Vertically align an image to bottom

I have a layout with (simplified) a table with 2 columns: in de left column there is an image vertically aligned to the bottom, in the right colum is the content of the mail. The image is always on the bottom of the table as it should but in Outlook 2007 it stays in the same place after the mail gets longer.

So it does work, but if the content reaches a certain height the image isn't aligned to the bottom anymore, it just seems to stop somewhere. Is this is known bug or is there something weird in my template? And if it's a bug: is there a known workaround for this?

The column is set to vertical-align: bottom in css, setting the html attribute valign="bottom" also doesn't seem to have any influence on this.

roshodgekiss roshodgekiss, 5 years ago

Hi mark, I'm not aware of an Outlook bug in regards to valign="bottom", so this is quite curious. This may sound a bit like voodoo, but have you tried splitting this left column into multiple cells? Pop the image in the bottom-most cell and apply valign="bottom" - you never know, it may overcome this vertical limit.

Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
markwittens, 5 years ago

Hi Rosanne, thanks for your reply! I've had no luck so far with this problem, I tried al sorts of things but it seems just impossible in Outlook 2007.

The problem is very simple to reproduce with this simple template:

<html>
  <head>
    <title>Height test</title>
  </head>
  <body>
    <table width="600">
      <tr>
        <td valign="bottom">
           Bottom aligned!
        </td>
        <td style="background: gray;">
          <p>
          Vivamus nec nisl eget justo pulvinar volutpat quis eget urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc porta posuere sagittis? Donec et nisl id neque aliquet laoreet. Proin in porta metus. Duis adipiscing diam ut libero ullamcorper eget vehicula ligula molestie. Praesent feugiat mauris in leo imperdiet scelerisque id eget metus. Ut sit amet ante id enim viverra consectetur. Cras vestibulum risus id sem suscipit ac porta lacus condimentum. Praesent auctor volutpat diam; facilisis posuere turpis gravida sit amet. Phasellus fringilla arcu odio, eu viverra metus. Donec ornare auctor massa; vitae feugiat ipsum sodales et.
          Sed faucibus faucibus sapien, eu sagittis lorem lacinia sit amet! Pellentesque condimentum tempor tellus id placerat? Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus facilisis, elit a vehicula eleifend, tellus diam sagittis nisi, sed adipiscing enim magna vel enim. Maecenas eget orci nibh, eu scelerisque nisi. Cras ultrices tempus rhoncus. Morbi adipiscing, massa nec fringilla dapibus, nulla tortor bibendum massa, nec lacinia velit nisi quis dui. Mauris lacus nisi, porta vitae placerat nec, malesuada nec ante. Morbi tincidunt imperdiet commodo. Aliquam et sagittis ante. Quisque nec sem leo, eget mattis diam. Nulla rutrum libero ullamcorper felis laoreet non commodo justo ornare. Vivamus posuere diam ut arcu commodo et adipiscing orci accumsan.
          </p>
          <p>
          Quisque ac justo felis. Sed vel quam ut sapien consequat volutpat. Nullam vulputate hendrerit blandit! Donec feugiat turpis nec massa tristique faucibus. Sed non felis sed diam interdum vulputate. Vestibulum luctus tincidunt mauris, eget tincidunt urna blandit quis. Vivamus leo ante, ultricies eget porta non, pretium eget est. Praesent quis tristique mi? Integer ultricies ultricies eros id pellentesque! Vestibulum nunc dolor, pharetra eget suscipit id, dapibus vitae nibh? Curabitur viverra ullamcorper suscipit!
          Vivamus nec nisl eget justo pulvinar volutpat quis eget urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc porta posuere sagittis? Donec et nisl id neque aliquet laoreet. Proin in porta metus. Duis adipiscing diam ut libero ullamcorper eget vehicula ligula molestie. Praesent feugiat mauris in leo imperdiet scelerisque id eget metus. Ut sit amet ante id enim viverra consectetur. Cras vestibulum risus id sem suscipit ac porta lacus condimentum. Praesent auctor volutpat diam; facilisis posuere turpis gravida sit amet. Phasellus fringilla arcu odio, eu viverra metus. Donec ornare auctor massa; vitae feugiat ipsum sodales et.
          </p>
          <p>
          Sed faucibus faucibus sapien, eu sagittis lorem lacinia sit amet! Pellentesque condimentum tempor tellus id placerat? Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus facilisis, elit a vehicula eleifend, tellus diam sagittis nisi, sed adipiscing enim magna vel enim. Maecenas eget orci nibh, eu scelerisque nisi. Cras ultrices tempus rhoncus. Morbi adipiscing, massa nec fringilla dapibus, nulla tortor bibendum massa, nec lacinia velit nisi quis dui. Mauris lacus nisi, porta vitae placerat nec, malesuada nec ante. Morbi tincidunt imperdiet commodo. Aliquam et sagittis ante. Quisque nec sem leo, eget mattis diam. Nulla rutrum libero ullamcorper felis laoreet non commodo justo ornare. Vivamus posuere diam ut arcu commodo et adipiscing orci accumsan.
          Quisque ac justo felis. Sed vel quam ut sapien consequat volutpat. Nullam vulputate hendrerit blandit! Donec feugiat turpis nec massa tristique faucibus. Sed non felis sed diam interdum vulputate. Vestibulum luctus tincidunt mauris, eget tincidunt urna blandit quis. Vivamus leo ante, ultricies eget porta non, pretium eget est. Praesent quis tristique mi? Integer ultricies ultricies eros id pellentesque! Vestibulum nunc dolor, pharetra eget suscipit id, dapibus vitae nibh? Curabitur viverra ullamcorper suscipit!
          </p>
          <p>
          Vivamus nec nisl eget justo pulvinar volutpat quis eget urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc porta posuere sagittis? Donec et nisl id neque aliquet laoreet. Proin in porta metus. Duis adipiscing diam ut libero ullamcorper eget vehicula ligula molestie. Praesent feugiat mauris in leo imperdiet scelerisque id eget metus. Ut sit amet ante id enim viverra consectetur. Cras vestibulum risus id sem suscipit ac porta lacus condimentum. Praesent auctor volutpat diam; facilisis posuere turpis gravida sit amet. Phasellus fringilla arcu odio, eu viverra metus. Donec ornare auctor massa; vitae feugiat ipsum sodales et.
          Sed faucibus faucibus sapien, eu sagittis lorem lacinia sit amet! Pellentesque condimentum tempor tellus id placerat? Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus facilisis, elit a vehicula eleifend, tellus diam sagittis nisi, sed adipiscing enim magna vel enim. Maecenas eget orci nibh, eu scelerisque nisi. Cras ultrices tempus rhoncus. Morbi adipiscing, massa nec fringilla dapibus, nulla tortor bibendum massa, nec lacinia velit nisi quis dui. Mauris lacus nisi, porta vitae placerat nec, malesuada nec ante. Morbi tincidunt imperdiet commodo. Aliquam et sagittis ante. Quisque nec sem leo, eget mattis diam. Nulla rutrum libero ullamcorper felis laoreet non commodo justo ornare. Vivamus posuere diam ut arcu commodo et adipiscing orci accumsan.
          </p>
          <p>
          Quisque ac justo felis. Sed vel quam ut sapien consequat volutpat. Nullam vulputate hendrerit blandit! Donec feugiat turpis nec massa tristique faucibus. Sed non felis sed diam interdum vulputate. Vestibulum luctus tincidunt mauris, eget tincidunt urna blandit quis. Vivamus leo ante, ultricies eget porta non, pretium eget est. Praesent quis tristique mi? Integer ultricies ultricies eros id pellentesque! Vestibulum nunc dolor, pharetra eget suscipit id, dapibus vitae nibh? Curabitur viverra ullamcorper suscipit!
          Vivamus nec nisl eget justo pulvinar volutpat quis eget urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc porta posuere sagittis? Donec et nisl id neque aliquet laoreet. Proin in porta metus. Duis adipiscing diam ut libero ullamcorper eget vehicula ligula molestie. Praesent feugiat mauris in leo imperdiet scelerisque id eget metus. Ut sit amet ante id enim viverra consectetur. Cras vestibulum risus id sem suscipit ac porta lacus condimentum. Praesent auctor volutpat diam; facilisis posuere turpis gravida sit amet. Phasellus fringilla arcu odio, eu viverra metus. Donec ornare auctor massa; vitae feugiat ipsum sodales et.
          </p>
          <p>
          Sed faucibus faucibus sapien, eu sagittis lorem lacinia sit amet! Pellentesque condimentum tempor tellus id placerat? Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus facilisis, elit a vehicula eleifend, tellus diam sagittis nisi, sed adipiscing enim magna vel enim. Maecenas eget orci nibh, eu scelerisque nisi. Cras ultrices tempus rhoncus. Morbi adipiscing, massa nec fringilla dapibus, nulla tortor bibendum massa, nec lacinia velit nisi quis dui. Mauris lacus nisi, porta vitae placerat nec, malesuada nec ante. Morbi tincidunt imperdiet commodo. Aliquam et sagittis ante. Quisque nec sem leo, eget mattis diam. Nulla rutrum libero ullamcorper felis laoreet non commodo justo ornare. Vivamus posuere diam ut arcu commodo et adipiscing orci accumsan.
          Quisque ac justo felis. Sed vel quam ut sapien consequat volutpat. Nullam vulputate hendrerit blandit! Donec feugiat turpis nec massa tristique faucibus. Sed non felis sed diam interdum vulputate. Vestibulum luctus tincidunt mauris, eget tincidunt urna blandit quis. Vivamus leo ante, ultricies eget porta non, pretium eget est. Praesent quis tristique mi? Integer ultricies ultricies eros id pellentesque! Vestibulum nunc dolor, pharetra eget suscipit id, dapibus vitae nibh? Curabitur viverra ullamcorper suscipit!
          </p>
        </td>
      </tr>
    </table>
  </body>
</html>

No matter how high the second column gets, the bottom aligned text in the first will stay in the same place it is now. Also, if the bottom aligned column is set to a specific height it won't grow beyond a certain value (not sure what value exactly). I have read about a maximum height of images in 2007, maybe this could be a related bug....

roshodgekiss roshodgekiss, 5 years ago

Ah, I see - thank you for the code above! I'll take a guess that it's related to the existing image height in Outlook bug, which clips images at 18" in height. Until we find a solid workaround, I'd recommend placing the bottom-aligned text into a row underneath the long text area.

Sorry about that, Mark - this one has me stumped, too. Glad you've brought it to our attention, though!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098