Chase
Reputation: 27
Vertical Alignment on a <td>
I'm a newbie, so I apologize in advance if this is incredibly easy.
I'm working on an HTML email and trying to keep as much CSS inline as possible. I've included a link to my code as it is right now: https://codepen.io/chaser87/pen/xxZEdEX
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>News of Note</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Learn the latest! ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<img src="Email Template/img/header2.jpg" width="600px"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win. To succeed you must believe. When you believe, you will succeed. We don’t see them, we will never see them. Give thanks to the most high. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! Surround yourself with angels. You see that bamboo behind me though, you see that bamboo? Ain’t nothin’ like bamboo. Bless up.</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="1" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="38%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--CONTENT-->
<img src="Email Template/img/600x600.jpg" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="1" cellpadding="0" cellspacing="0" width="58%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<!--CONTENT-->
<span><h3>Take a Tour!</h3>
</span>
<p>
Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="58%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<!--CONTENT-->
<span><h3>A Top-Rated Restaurant</h3>
</span><p>
Lorem Khaled Ipsum is a major key to success. We the best. We the best. In life there will be road blocks but we will over come it. We the best. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion! They don’t want us to win. To succeed you must believe. When you believe, you will succeed. We don’t see them, we will never see them. Give thanks to the most.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="38%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<img src="Email Template/img/600x600.jpg" width="225">
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 0px 0px; vertical-align: top;"><span style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'">More Useful Links</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I cannot figure out how to get the "Take a Tour!" and body copy in that column vertically aligned to the top. What am I missing?
This email is completely built in tables, so I apologize for the state of my code. Can anyone lend some advice? Thanks!
Upvotes: 0
Views: 103
Answers (1)
Alessio
Reputation: 3610
This is because you used a h3 to wrap "Take a Tour!", which, by default has a margin-top (and also a margin-bottom). Simply declare them to 0 and your sentence will go up to the top!
you can do it in your CSS part:
h3 {
margin-top: 0px;
margin-bottom: 0px;
}
or inline:
<h3 style="margin-top:0px;margin-bottom:0px;">Take a Tour!</h3>
Here's the update working Codepen.
Hope this helps!
Upvotes: 1
Related Questions
- Vertical alignment in email template
- Aligning elements left and right inline in td for html email
- Vertically align text next to an image in <td>
- HTML email: top and bottom aligned content
- Vertical align on TD for email templates or newsletters
- Vertical align images in td
- HTML email misalignment in Outlook 2013?
- HTML email - td not aligning properly
- HTML email text vertical align
- CSS Vertical Alignment in HTML emails