I'm having trouble aligning two DIVs within a table TD to the bottom of the table. Despite trying various alignment methods, the left DIV simply won't move. It's crucial for me to design this email responsively, ensuring it still displays correctly when the window is narrowed.
For those who want to take a look at my code on JSFiddle: http://jsfiddle.net/hirenshah/rdux8vkg/
This is the HTML snippet:
<body bgcolor="#C0C0C0">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="container" width="300px" cellpadding="0" cellspacing="0" style="max-width: 600px; background-color: white; margin-left: auto; margin-right: auto;">
<tr>
<td>
<!-- Header Table Start -->
<table width="100%" cellpadding="0" cellspacing="0" >
<tr>
<td style="text-align: center; vertical-align:bottom; font-size: 0;">
<div class="headercolumnright">
<img src="http://hirenshah.co.uk/poc/logo.png" width="50%"/></div>
<div class="headercolumnleft ">Reference: 123456789</div>
</td>
</tr>
</table>
<!-- Header Table End -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
And here is the CSS snippet:
@media screen and (min-width: 601px) {
.container {
width:600px !important;
}
.headercolumnright {
text-align:right !important;
}
}
.headercolumnleft {
width: 300px;
display: inline-block;
text-align:left;
float: left;
font-size:12pt;
}
.headercolumnright {
width: 300px;
display: inline-block;
text-align:left;
float: right;
font-size:12pt;
vertical-align:bottom;
}
div {
outline: 1px solid red;
}