CODEWITHSUNDEEP
html
Burger Sasha
Burger Sasha

Reputation: 175

Aligning elements left and right inline in td for html email

enter image description here

I am trying to align these elements as illustrated in the image.

Initially I used float and then tried width: calc() but found these will cause issues with certain clients.

Can anyone suggest another solution?

<tr height="40px" bgcolor="#00a2c5">
  <td>
    <span style="padding-left:20px;color:#ffffff;display: inline-block;width: calc(50% - 40px);"><a href="#">Call 13 63 93</a></span>
    <span style="padding-right:0px;color:#ffffff;text-align:right;display:inline-block;width: calc(50% - 0px);"><a href="#">Clarendon.com.au</a></span>
  </td>
</tr>

Upvotes: 3

Views: 8382

Answers (3)

Divyesh Virdiya
Divyesh Virdiya

Reputation: 96

please use this HTML - no need to cal or other HTML, table have different CSS so use table parameter or attribute for email.

<table width="100%" border="0" cellpadding="10" cellspacing="0">
    <tr bgcolor="#00a2c5">
    	<td align="left" width="50%" height="40px"><a href="#" style="color:#ffffff;">Call 13 63 93</a></td>
    	<td align="right" width="50%"><a href="#" style="color:#ffffff;">Clarendon.com.au</a></td>
    </tr>
</table>

Upvotes: 6

Buwaneka Sudheera
Buwaneka Sudheera

Reputation: 1417

It's better if you could use div tags instead of tables. You can create that alignment like this.

<div id="whiteDiv">
    <div id="blueDiv">
        <span id="span1"><a href="#" id="anchor1">Call 13 63 93</a></span>
        <span id="span2"><a href="#" id="anchor2">Clarendon.com.au</a></span>
    </div>
</div>


#blueDiv{
    background-color: blue;
    display: flex; 
    width: 100%;
    flex-direction: row;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}

#blueDiv span a{
    color: #fff;
}

#whiteDiv{
    background-color: #EAE8E8;
    height: 100px;
    display: flex; 
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

I have checked it in codepen.

enter image description here

Upvotes: 2

ankit singh
ankit singh

Reputation: 575

I think this might be happen because you inclose two span tag with a single td tag if possible kindly update you structure like this

<table style="width: 100%; border-collapse:collapse">
    <tr height="40px" bgcolor="#00a2c5">
        <td valign="center" style="padding:10px;text-align:left">
            <a href="#">Call 13 63 93</a>
        </td>
        <td valign="center" style="padding:10px;text-align:right">
            <a href="#">Clarendon.com.au</a>
        </td>
    </tr>
</table>

Upvotes: 0

Related Questions