$email = "***EMAIL RECIEVED***";
include_once "PHPMailer/PHPMailer.php";
$mail = new PHPMailer();
$mail->setFrom('***EMAIL FROM***');
$mail->addAddress($email);
$mail->Subject = "MyWhiteCard Coupon Claimed!";
$mail->isHTML(true);
$mail->Body =
"<body style='background-color: #fbedde; width:800px; text-align: center; margin-left: auto; margin-right: auto;'>
<img src='cid:logo' width='40%' style='margin-left: auto; margin-right: auto; padding-top: 20px;'>
<h1 style='color: #00a6a6; letter-spacing: 2px; margin-bottom: 0px; font-family: 'brandon_black';'>COUPON CLAIMED</h1>
<div style='padding-top:30px; width: 400px;float:left;'>
<img src='cid:coupon' width='85%' style='padding-left: auto; padding-right: auto; margin-bottom: 65px; border-radius: 2% !important; box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);'>
</div>
<div style='padding-top: 15px; padding-bottom: 33px; width: 400px; float: left; text-align: left; color: #00a6a6'>
<h3 style='font-weight: bold;'>Claimed By:</h3>
<h2 style='letter-spacing: 1px; font-family: 'brandon_black';'>$usr_fname $usr_lname</h2>
<h3 style='font-weight: bold;'>$usr_contact</h3>
<h3 style='font-weight: bold;'>$usr_member</h3><br>
<h3>Please proceed to</h3>
<a href='https://www.mywhitecard.ph/cms' style='color: #00a6a6; text-decoration: underline;'>https://www.mywhitecard.ph/cms</a>
<h3>for scheduling of member.</h3>
</div>
</body>";
$mail->AddEmbeddedImage(dirname(__FILE__) . '***IMG LINK***','logo');
$mail->AddEmbeddedImage(dirname(__FILE__) . '***IMG LINK***','coupon');
$mail->send();
First of all I had to add all css in style="" because I am sending this via PHP email. My issue is I have a body tag with a background color, but my two other div tags inside does not color them. How come this is happening?
You have both of those elements floated, so they do not affect the height of their ancestors any more.
In a normal HTML page that would not lead to the effect you are seeing, because there is some built-in “magic” that lets the
bodyelement background grow to the full viewport height, if thehtmlelement does not have any background color of its own, but in the context where your mail gets displayed later on, that might be different.So apply a clearfix to get body to contain those two elements.