PC
1
Even Column Heights
Hey all,
I have been trying to get an even height pair of columns working. I am almost there but am stuck on the last bit, which is proving very difficult. The left and right column cells are both gowing to 100% of their container, the cells content is vertically aligned to the top, but I need the CTA bottom to vertically align to the bottom, so if either column grows larger than the other, the CTAS will always align up at the bottom of the cell.
I can only think of two ways of doing this. The first is just to find a way to force the CTA to align bottom even though the other items are aligned to the top, or place another cell around it that then grows to the remaining height of the container, allowing the CTA to align to its bottom.
I have been playing with both ideas but have had no success at all. Does anybody have any ideas?
` <body style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; color: #000000; width: 100%;" class="md-r">
<table cellpadding="0" cellspacing="0" border="0" width="600" style="margin: 0; padding: 0; text-align: left; width: 100%; min-width: 600px; line-height: 100%;" role="presentation" class="background-table has-width-600" bgcolor="#EEEEEE" valign="top">
<tbody>
<tr>
<th valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;margin:0 auto" role="presentation" class="email-content" align="center">
<tbody>
<tr>
<th valign="top" style="padding: 0;">
<div>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="block-horz-container horizontal-grid" bgcolor="#FFFFFF" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="10" align="left"> </th>
<th valign="top" style="padding: 0; border: 1px solid #000000; text-align: left;" class="border left-block vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="image-container" width="280" align="left"><img src="https://placehold.it/280x150" width="280" height="150" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block;"></th>
</tr>
<tr>
<th valign="top" style="mso-line-height-rule: exactly; padding: 0; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 15px; padding-bottom: 5px;" class="pad-top-15 pad-bottom-5 text-container" width="280" align="center">LEFT BLOCK</th>
</tr>
<tr>
<th valign="top" style="mso-line-height-rule: exactly; padding: 0; padding-left: 10px; padding-right: 10px; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 10px; padding-bottom: 10px;" class="fs-12 pad-top-10 pad-bottom-10 pad-sides-10 text-container" width="280" align="center">Eiusmod proident tempor esse elit ea nulla quis ex laboris officia sit dolor culpa. Quis aute ipsum eiusmod occaecat commodo. Ad est qui nostrud consectetur quis cillum ut aute voluptate amet eu deserunt.<br>sdasdsdsd<br>sdsds</th>
</tr>
</tbody>
</table>
</th>
</tr>
<tr>
<th valign="text-bottom" style="padding: 0; width: 280px; display: table-cell; bottom: 0; text-align: left; height: 100%; vertical-align: text-bottom;" class="play vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="bottom" style="padding: 0; height: 100%; text-align: left; padding-top: 10px; padding-bottom: 20px;" class="pad-top-10 pad-bottom-20 full-height mobile-display-block button-container" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="auto" style="margin:0 auto" role="presentation" align="center">
<tbody>
<tr>
<th valign="middle" style="mso-line-height-rule: exactly; padding: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #444444; text-align: center;" align="center"><a style="-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:10px 20px;display:inline-block;text-decoration:none;text-align:center;color:#FFFFFF;border:1px solid #444444;font-family:Arial, sans-serif;font-size:15px;line-height:18px;font-weight:normal" href="#" target="_blank">Click here</a></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
<th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="20" align="left"> </th>
<th valign="top" style="padding: 0; border: 1px solid #000000; text-align: left;" class="border right-block vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="image-container" width="280" align="left"><img src="https://placehold.it/280x150" width="280" height="150" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block;"></th>
</tr>
<tr>
<th valign="top" style="mso-line-height-rule: exactly; padding: 0; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 15px; padding-bottom: 5px;" class="pad-top-15 pad-bottom-5 text-container" width="280" align="center">RIGHT BLOCK</th>
</tr>
<tr>
<th valign="top" style="mso-line-height-rule: exactly; padding: 0; padding-left: 10px; padding-right: 10px; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 10px; padding-bottom: 10px;" class="fs-12 pad-top-10 pad-bottom-10 pad-sides-10 text-container" width="280" align="center">Eiusmod proident tempor esse elit ea nulla quis ex laboris officia sit dolor culpa. Quis aute ipsum eiusmod occaecat commodo. Ad est qui nostrud consectetur quis cillum ut aute voluptate amet eu deserunt.</th>
</tr>
</tbody>
</table>
</th>
</tr>
<!-- CTA -->
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="text-bottom" style="padding: 0; width: 280px; display: table-cell; bottom: 0; text-align: left; height: 100%; vertical-align: text-bottom; padding-top: 10px; padding-bottom: 20px;" class="pad-top-10 pad-bottom-20 play mobile-display-block button-container" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="auto" style="margin:0 auto" role="presentation" align="center">
<tbody>
<tr>
<th valign="middle" style="mso-line-height-rule: exactly; padding: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #444444; text-align: center;" align="center"><a style="-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:10px 20px;display:inline-block;text-decoration:none;text-align:center;color:#FFFFFF;border:1px solid #444444;font-family:Arial, sans-serif;font-size:15px;line-height:18px;font-weight:normal" href="#" target="_blank">Click here</a></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
<th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="10" align="left"> </th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</div>
<div>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="horizontal-gutter" bgcolor="#FFFFFF" height="20" align="left"> </th>
</tr>
</tbody>
</table>
</div>
<div>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="block-horz-container horizontal-grid" bgcolor="#FFFFFF" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="10" align="left"> </th>
<th valign="top" style="padding: 0; border: 1px solid #000000; text-align: left;" class="border left-block vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="image-container" width="280" align="left"><img src="https://placehold.it/280x150" width="280" height="150" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block;"></th>
</tr>
<tr>
<th valign="top" style="mso-line-height-rule: exactly; padding: 0; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 15px; padding-bottom: 5px;" class="pad-top-15 pad-bottom-5 text-container" width="280" align="center">LEFT BLOCK</th>
</tr>
<tr>
<th valign="top" style="mso-line-height-rule: exactly; padding: 0; padding-left: 10px; padding-right: 10px; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 10px; padding-bottom: 10px;" class="fs-12 pad-top-10 pad-bottom-10 pad-sides-10 text-container" width="280" align="center">Eiusmod proident tempor esse elit ea nulla quis ex laboris officia sit dolor culpa. Quis aute ipsum eiusmod occaecat commodo. Ad est qui nostrud consectetur quis cillum ut aute voluptate amet eu deserunt.<br>sdasdsdsd<br>sdsds</th>
</tr>
</tbody>
</table>
</th>
</tr>
<tr>
<th valign="text-bottom" style="padding: 0; width: 280px; display: table-cell; bottom: 0; text-align: left; height: 100%; vertical-align: text-bottom;" class="play vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="bottom" style="padding: 0; height: 100%; text-align: left; padding-top: 10px; padding-bottom: 20px;" class="pad-top-10 pad-bottom-20 full-height mobile-display-block button-container" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="auto" style="margin:0 auto" role="presentation" align="center">
<tbody>
<tr>
<th valign="middle" style="mso-line-height-rule: exactly; padding: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #444444; text-align: center;" align="center"><a style="-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:10px 20px;display:inline-block;text-decoration:none;text-align:center;color:#FFFFFF;border:1px solid #444444;font-family:Arial, sans-serif;font-size:15px;line-height:18px;font-weight:normal" href="#" target="_blank">Click here</a></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
<th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="20" align="left"> </th>
<th valign="top" style="padding: 0; border: 1px solid #000000; text-align: left;" class="border right-block vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="vertical-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0; text-align: left;" class="image-container" width="280" align="left"><img src="https://placehold.it/280x150" width="280" height="150" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block;"></th>
</tr>
<tr>
<th valign="top" style="mso-line-height-rule: exactly; padding: 0; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 15px; padding-bottom: 5px;" class="pad-top-15 pad-bottom-5 text-container" width="280" align="center">RIGHT BLOCK</th>
</tr>
<tr>
<th valign="top" style="mso-line-height-rule: exactly; padding: 0; padding-left: 10px; padding-right: 10px; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 10px; padding-bottom: 10px;" class="fs-12 pad-top-10 pad-bottom-10 pad-sides-10 text-container" width="280" align="center">Eiusmod proident tempor esse elit ea nulla quis ex laboris officia sit dolor culpa. Quis aute ipsum eiusmod occaecat commodo. Ad est qui nostrud consectetur quis cillum ut aute voluptate amet eu deserunt.</th>
</tr>
</tbody>
</table>
</th>
</tr>
<tr>
<th valign="text-bottom" style="padding: 0; width: 280px; display: table-cell; bottom: 0; text-align: left; height: 100%; vertical-align: text-bottom;" class="play horizontal-grid" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
<tbody>
<tr>
<th valign="bottom" style="padding: 0; height: 100%; text-align: left; padding-top: 10px; padding-bottom: 20px;" class="pad-top-10 pad-bottom-20 full-height mobile-display-block button-container" width="280" align="left">
<table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
<tbody>
<tr>
<th valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="auto" style="margin:0 auto" role="presentation" align="center">
<tbody>
<tr>
<th valign="middle" style="mso-line-height-rule: exactly; padding: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #444444; text-align: center;" align="center"><a style="-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:10px 20px;display:inline-block;text-decoration:none;text-align:center;color:#FFFFFF;border:1px solid #444444;font-family:Arial, sans-serif;font-size:15px;line-height:18px;font-weight:normal" href="#" target="_blank">Click here</a></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
<th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="10" align="left"> </th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</div>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</body>
`
it looks like you have your CTA table nested in with the copy table. if you separate it out more and valign="bottom" the CTA table that should fix