Trying to present two buttons right next to each other, but with some specific requirements:

  • The space between the buttons should be always the same.
  • The button labels are customize-able so the width of the first column is unknown
  • A single media query stacks the columns
  • Needs to work in most clients, from Outlook 2007 (non-responsive) to Outlook.com, gmail etc.

Has anybody been successful at accomplishing anything like this?

Two buttons side by side

I'm using the Cerberus Responsive template and have a solution which works almost everywhere but outlook.

In outlook, the first button gets squished by the width of the second button's column.

Squished button

Here's the code:

<!-- side by side buttons: START -->

<tr>
<td dir="ltr" width="100%" style="background-color: #ffffff; text-align: left; padding: 10px 30px 0;" align="left">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="" class="full-width-on-narrow">
<tr>
<!-- Column : BEGIN -->
<td class="stack-column">

<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="full-width-on-narrow">
<tr>
<td dir="ltr" valign="top" align="left" style="font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; text-align: left; padding: 5px 20px 5px 0;" class="left-on-narrow" nowrap>

<!-- Button : BEGIN -->
<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="button-td button-td-primary" style="background-color: #267baf;">
<a class="button-a button-a-primary" href="#" style="background-color: #267baf; font-family: sans-serif; padding: 9px 17px; border: 1px solid #267baf; font-size: 15px; font-weight: bold; line-height: 100%; text-decoration: none; color: #ffffff; display: block;">Button 1 Custom Label</a>
</td>
</tr>
</table>
<!-- Button : END -->

</td>
</tr>
</table>

</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td width="100%" class="stack-column">

<table width="100%" role="presentation" border="0" cellpadding="0" cellspacing="0" class="full-width-on-narrow">
<tr>
<td dir="ltr" valign="top" align="left" style="font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; text-align: left; padding: 5px 0;" class="left-on-narrow" nowrap>

<!-- Button : BEGIN -->
<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="button-td button-td-secondary" style="background-color: #b0b0b0;">
<a class="button-a button-a-secondary" href="#" style="background-color: #b0b0b0; font-family: sans-serif; padding: 9px 17px; border: 1px solid #b0b0b0; font-size: 15px; font-weight: bold; line-height: 100%; text-decoration: none; color: #ffffff; display: block;">Button 2 Custom Label</a>
</td>
</tr>
</table>
<!-- Button : END -->

</td>
</tr>
</table>

</td>
<!-- Column : END -->
</tr>
</table>
</td>
</tr>

<!-- side by side buttons: END -->

and the relevant css:

@media screen and (max-width: 600px) {

/* What it does: Forces table cells into full-width rows. /
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/
And center justify these ones. */
.stack-column-center {
text-align: center !important;
}

.full-width-on-narrow {
width: 100% !important;
}

}