'Why Are My Images in the Three-Columns Row Not Lining Up Horiztonally?
Trying to build up my first actual email template and I'm having some issues with the three-columns images lining up vertically above and below each other, not horizontally with each taking up 200px of 600px like I'm aiming for. I've combed through the code 3x now and have not found the issue, as at this point I'm following along with a tutorial and watching his work perfectly. What obvious thing am I missing? I apologize for the sloppy CSS formatting in advance, I'm trying to reduce the line count a bit since every line will need quotes around it for Yogmail. Thank you!
Edit: Just added the entire template so you can see that it's not till three-columns that the email template breaks, and from there even the footer or copy and pasted borders are stuck in the center. I seem to be having a similar problem with anything I build into this document after the three-columns section, but not before. I'm guessing maybe they're pulling CSS from a class I'm not intending it to? Everything above the section I posted works as intended, while everything below it is stuck in the center without the ability to display horizontally.
CSS:
<style>
body {background-color: #cccccc;margin: 0;}
h1 {color: black;font-size: 150%;text-align: center;}
p {color: black}
table {border-spacing: 0;}
td {padding: 0;}
img {border: 0;}
.wrapper {width: 100%;table-layout: fixed;background-color: #cccccc;padding-bottom: 60px;}
.main {background-color: #ffffff;margin: 0 auto;width: 100%;max-width: 600px;border-spacing: 0;font-family: poppins;color: #26a69a}
.two-columns {text-align: center;font-size: 0;}
.two-columns .column {width: 100%;max-width: 300px;display: inline-block;vertical-align: top;}
.button {background-color: #26a69a;color: #ffffff;text-decoration: none;padding: 12px 20px;font-weight: bold;border-radius: 10px;}
.three-columns {text-align: center;font-size: 0;padding: 35px 0 20px;}
.three-columns .column {width: 100%;max-width: 200px;display: inline-block;vertical-align: top;}
.three-columns .padding {padding: 15px}
.three-columns .content {font-size: 15px;line-height: 20px;}HTML:
<!-- THREE COLUMN SECTION -->
<tr>
<td>
<table width="100%">
<tr>
<td class="three-columns">
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#" target="_blank" rel="noreferrer noopener"><img src="Images/Selling.png" alt="First Icon" width="110" style="max-width: 110px;border-radius: 55px;"></a>
</td>
</tr>
<tr>
<td style="padding: 10px">
<p style="font-weight: bold;font-size: 17px">Start Another Transaction</p>
<p>Placeholder Paragraph</p>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#" target="_blank" rel="noreferrer noopener"><img src="Images/Update.png" alt="Second Icon" width="110" style="max-width: 110px;border-radius: 55px;"></a>
</td>
</tr>
<tr>
<td style="padding: 10px">
<p style="font-weight: bold;font-size: 17px">Update Transaction</p>
<p>Placeholder Paragraph</p>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#" target="_blank" rel="noreferrer noopener"><img src="Images/Contact.png" alt="Third Icon" width="110" style="max-width: 110px;border-radius: 55px;"></a>
</td>
</tr>
<tr>
<td style="padding: 10px">
<p style="font-weight: bold;font-size: 17px">Contact Us</p>
<p>Placeholder Paragraph</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>HTML Metadata:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">ALL CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background-color: #cccccc;margin: 0;}
h1 {color: black;font-size: 150%;}
p {color: black}
table {border-spacing: 0;}
td {padding: 0;}
img {border: 0;}
.wrapper {width: 100%;table-layout: fixed;background-color: #cccccc;padding-bottom: 60px;}
.main {background-color: #ffffff;margin: 0 auto;width: 100%;max-width: 600px;border-spacing: 0;font-family: poppins;color: #26a69a}
.two-columns {text-align: center;font-size: 0;}
.two-columns .column {width: 100%;max-width: 300px;display: inline-block;vertical-align: top;}
.button {background-color: #26a69a;color: #ffffff;text-decoration: none;padding: 12px 20px;font-weight: bold;border-radius: 10px;}
.three-columns {text-align: center;font-size: 0;padding: 35px 0 20px;}
.three-columns .column {width: 100%;max-width: 200px;display: inline-block;vertical-align: top;}
.three-columns .padding {padding: 15px}
.three-columns .content {font-size: 15px;line-height: 20px;}
.two-columns.last {padding: 35px 0;}
.two-columns .padding {padding: 20px;}
.two-columns .content {font-size: 15px;line-height: 20px;text-align: left;}
</style>
<body>
<center class="wrapper">
<table class="main" width="100%">
<!-- BORDER -->
<tr>
<td height="8" style="background-color:#26a69a;"></td>
</tr>
<!-- LOGO & HEADER -->
<tr>
<td style="padding: 14px 0 4px;">
<table width="100%">
<tr>
<td class="two-columns">
<table class="column">
<tr>
<td style="padding: 0 68px 10px;">
<a href="#" target="_blank" rel="noreferrer noopener">
<img src="#" alt="Logo"
width="180" TITLE="Logo"></a>
</td>
</tr>
</table>
<table class="column">
<tr>
<td style="padding: 10px 84px;">
<a href="https://www.facebook.com" target="_blank" rel="noreferrer noopener">
<img src="#" alt="Facebook"
width="32"></a>
<a href="https://www.instagram.com" target="_blank" rel="noreferrer noopener">
<img src="#" alt="Instagram"
width="32"></a>
<a href="https://www.twitter.com" target="_blank" rel="noreferrer noopener">
<img src="#" alt="Twitter"
width="32"></a>
<a href="https://www.github.com" target="_blank" rel="noreferrer noopener">
<img src="#" alt="GitHub"
width="32"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- BANNER IMAGE -->
<tr>
<td>
<a href="#"><img src="BANNER URL HERE" alt="#" width="600" style="max-width: 100%;">
</a>
</td>
</tr>
<!-- TITLE, TEXT & BUTTON -->
<tr>
<td style="padding: 5px 0 50px;">
<table width="100%">
<tr>
<td style="text-align: center;padding: 15px;padding: 5px 0 15px;">
<p style="font-size: 20px;font-weight: bold">Your <strong style="color:#26a69a">Next</strong> Steps:</p>
<p style="font-size: 15px;line-height: 23px;">Your transaction is now live. </p><br><br>
<a href="#" class="button">Click Here</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- BORDER -->
<tr>
<td height="2" width="100%" style="background-color:#26a69a;"></td>
</tr>
<!-- THREE COLUMN SECTION -->
<tr>
<td>
<table width="100%">
<tr>
<td class="three-columns">
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#" target="_blank" rel="noreferrer noopener"><img src="Images/Selling.png" alt="First Icon" width="110" style="max-width: 110px;border-radius: 55px;"></a>
</td>
</tr>
<tr>
<td style="padding: 10px">
<p style="font-weight: bold;font-size: 17px">Ensure Another Transaction</p>
<p>Click here to ensure another crypto transaction as a buyer or seller with Crypto Ensure</p>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#" target="_blank" rel="noreferrer noopener"><img src="Images/Update.png" alt="Second Icon" width="110" style="max-width: 110px;border-radius: 55px;"></a>
</td>
</tr>
<tr>
<td style="padding: 10px">
<p style="font-weight: bold;font-size: 17px">Update Transaction</p>
<p>Click here to update an existing transaction</p>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#" target="_blank" rel="noreferrer noopener"><img src="Images/Contact.png" alt="Third Icon" width="110" style="max-width: 110px;border-radius: 55px;"></a>
</td>
</tr>
<tr>
<td style="padding: 10px">
<p style="font-weight: bold;font-size: 17px">Contact Us</p>
<p>Click here to get in contact with our team if you have any questions or comments</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- BORDER -->
<tr>
<td height="2" width="100%" style="background-color:#26a69a;"></td>
</tr>
<!-- TWO COLUMN SECTION -->
<tr>
<td>
<table width="100%">
<tr>
<td class="two-columns last">
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<a href="#"><img src="FILLER IMAGE URL" alt="Filler" width="260" style="max-width: 260px;"></a>
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="padding">
<table class="content">
<tr>
<td>
<p style="font-size 17px;font-weight: bold">Thank You!</p>
<p>Ending Message Goes Here</p>
<p style="padding-bottom: 15px">For more information regarding our service, see our documents page or reach out to us directly.</p>
<a href="https://app.gitbook.com/s/yIF6QtFMeVpI1feN6JRP/" target="_blank" rel="noreferrer noopener" class="button">Documentation</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- FOOTER SECTION -->
<tr>
<td style="background-color: #565656;color: #26a69a">
<table width="100%">
<tr>
<td style="text-align: center;padding: 45px 20px;">
<a href="#"><img src="#" alt="Logo" width="160"></a>
<p style="padding: 10px;">Email Address</p>
<p style="padding: 10px">123 Chris Address, Louisville, KY 15222</p>
<a href="https://www.facebook.com" target="_blank" rel="noreferrer noopener">
<img src="URL FOR ICON" alt="Facebook"
width="30"></a>
<a href="https://www.instagram.com/" target="_blank" rel="noreferrer noopener">
<img src="URL FOR ICON" alt="Instagram"
width="30"></a>
<a href="https://www.twitter.com/" target="_blank" rel="noreferrer noopener">
<img src="URL FOR ICON" alt="Twitter"
width="30"></a>
<a href="https://www.github.com/" target="_blank" rel="noreferrer noopener">
<img src="URL FOR ICON" alt="GitHub"
width="30"></a>
</td>
</tr>
<tr>
<td height="8" style="background-color:#26a69a;"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>Solution 1:[1]
Here's something you can try??
h1 {
font-size:18px;
padding:10px;
}
.featured {
max-width:200px;
max-height:600px;
box-shadow:0px 4px 12px 0px;
}
.featured-container {
display:grid;
grid-template-columns:auto auto auto;
grid-gap:20px;
}
.featured > img {
object-fit:cover;
width:200px;
height:200px;
}
.featured-info {
display:grid;
grid-template-columns:auto auto;
padding:5px;
grid-gap:5px;
}
.featured-description {
padding:5px;
line-height:1;
}<div class="featured-container">
<div class="featured">
<img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">
<h1>#241 Blk 24 Mooncute, Cats California 95534</h1>
<div class="featured-info">
<p>$1,000</p>
<p>Single Family Home</p>
<p>Beds:2</p>
<p>Bath:1</p>
</div>
<div class="featured-description">
<h1>Description</h1>
<p>This cat are the most beautiful animals on earth They are so cute please don't hurt them Because cats.. </p>
</div>
</div>
<div class="featured">
<img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">
<h1>#241 Blk 24 Mooncute, Cats California 95534</h1>
<div class="featured-info">
<p>$1,000</p>
<p>Single Family Home</p>
<p> Beds:2</p>
<p>Bath:1</p>
</div>
<div class="featured-description">
<h1>Description</h1>
<p>This cat are the most beautiful animals on earth They are so cute please<p/>
</div>
</div>
<div class="featured">
<img src="https://images.unsplash.com/photo-1600357077527-930ccbaf7773?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80">
<h1>#241 Blk 24 Mooncute, Cats California 95534</h1>
<div class="featured-info">
<p>$1,000</p>
<p>Single Family Home</p>
<p> Beds:2</p>
<p>Bath:1</p>
</div>
<div class="featured-description">
<h1>Description</h1>
<p>This cat are the most beautiful animals on earth They are so cute please don't</p>
</div>
</div>
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Crystal |