Email columns and horizontally aligned buttons | Community
Skip to main content
A
Anonymous
January 18, 2016
Solved

Email columns and horizontally aligned buttons

  • January 18, 2016
  • 1 reply
  • 2911 views

You email developers out there - is there a way to have buttons in separate columns aligned horizontally when the length of copy in each differs? I spent hours working on it this weekend to no avail, so I'm pretty desperate.  I've tried setting column heights in table cells and tables, stacking tables and aligning top or bottom, and a million other things. The only way I have managed to make it work (in Outlook 2007, 2010, and 2013) is by putting in multiple <br /> tags to even up the lines of text. That of course is incredibly unreliable, not to mention it displays horribly on mobile.  In some clients other than Outlook, the buttons are aligned, however there are huge gaps between the column copy and the header text.

The comp is here: info.versionone.com/rs/981-LQX-968/images/email-columns.jpg

I'm using a fluid hybrid template from Email on Acid with which I've had great results.  My code is here: https://litmus.com/builder/4b9121a

My rendering test is here: Email On Acid - Email Testing

Thanks in advance for any guidance or feedback.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Frank_Breen2

Try the attached, I only did the first row, but this should look like the JPG you supplied.

1 reply

Frank_Breen2
Frank_Breen2
New Participant
January 18, 2016

If you set the height of the <td> to a fixed height and set the align plus valign, you should be able to fix this, see attached.

If you really want to make it look like the jpg however, you need to nest the <table> column in another <table>.

A
Anonymous
January 18, 2016

Hi Frank -

When you mention nesting the table column in another table, are you referring to the class="column" table or the class="contents" table?

Thanks so much for the help!

Frank_Breen2
Frank_Breen2Accepted solution
New Participant
January 18, 2016

Try the attached, I only did the first row, but this should look like the JPG you supplied.

Terms & ConditionsAccessibility statement

Loading footer...