ughoo/responsive-gmail-layout-hybrid-test-FIXED.html

## responsive-gmail-layout-hybrid-test-FIXED.html
<html>
<head>
	<style>
		/* useful resets for HTML emails */
		* {line-height: inherit;}
		.ExternalClass * { line-height: 100%; }
		body, p{margin:0; padding:0; margin-bottom:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;} img{line-height:100%; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} a img{border: none;} #backgroundTable {margin:0; padding:0; width:100% !important; } a, a:link, .no-detect-local a, .appleLinks a{color:#5555ff !important; text-decoration: underline;} .ExternalClass {display: block !important; width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: inherit; } table td {border-collapse:collapse;mso-table-lspace: 0pt; mso-table-rspace: 0pt;} sup{position: relative; top: 4px; line-height:7px !important;font-size:11px !important;} .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration: default; color: #5555ff !important; pointer-events: auto; cursor: default;} .no-detect a{text-decoration: none; color: #5555ff; pointer-events: auto; cursor: default;} {color: #5555ff;} span {color: inherit; border-bottom: none;} span:hover { background-color: transparent; }

		.nounderline {text-decoration: none !important;}
	</style>
	<!-- separate your reset and design css, because gmail.com strips out the whole STYLE tag which contains our resets -->
	<style>
		h1, h2, h3 { margin:0; padding:0; }
		p {Margin: 0px !important; }

		html, body {
			background:#eaeaea;
			margin:0;
			padding:0;
			font-size: 14px;
			font-family: Arial, sans-serif;
		}

		h1 {
			font-size:26px;
			line-height: 36px;
			padding: 5px;
		}

		p {
			font-size:14px;
			line-height:16px;
			padding:5px;
		}
		#body {
			font-family: Arial, sans-serif;
			font-size: 14px;
			background:#eaeaea;
		}

		.wrap {
			max-width:600px;
			width:100%;
			margin:0 auto;

		}

		.head {
			max-width:600px;
			height:auto;
			width:100%;
		}

		.headimg {
			max-width:600px;
			height:auto;
			width:100%;
		}

		#content {
			background:#ffffff;
			margin-top:10px;
			padding:10px;
		}

		.columns + p {
			clear:both;
		}

		.left-column {
			width:200px;
			float:left;
		}

		.right-column {
			width:380px;
			float:left;
		}

		#foot {
			text-align:center;
		}

		.foot-text {
			font-size:12px;
		}

	@media screen and (max-width: 599px) {

		.left-column {
			width:100%;
			float:none;
			text-align:center;
		}

		.right-column {
			width:100%;
			float:none;
		}

		.hide {
			display:none;
		}
	}
	</style>
</head>
<body>
	<div id='body'>
		<div class="wrap">
		<!--[if (gte mso 9)|(IE)]>
			<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
			<tr>
			<td align="left" valign="top" width="600">
			<![endif]-->
			<div class="head">
				<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=600%C3%9750&w=600&h=50" alt="" class="headimg" />
			</div>

			<div id="content">
				<h1>Hybrid - Div and Table Based - HTML Email</h1>
				<p>In traditional web-based HTML we often use width and float on divs to create complex layout. The CSS properties are defined in the STYLE tag in the HEAD of the template.</p>
				<p>It follows a desktop first approach, which means that if device is less than 600px wide, then we overwrite some of the css properties so the content can be stacked under each other on mobile devices.</p>
				<p>On old Outlooks and on IE rendering engine based email clients, we can stabilize our code with conditional comments and TABLEs. (Those email clients do not support float and width properties on divs.)</p>
				<p>This email template is made for testing purposes described in the article titled: <br><a href="http://edmdesigner.com/blog/coding-responsive-html-emails-after-the-gmail-update">"Responsive Html Email and Gmail"</a> | <a href="https://gist.github.com/ughoo/8fb946191cca5abd1143a1a4de82eecb">template on Gist</a></p>
				<br>
				<br>

				<div class="columns">
				<!--[if (gte mso 9)|(IE)]>
				<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#ffffff">
				<tr>
				<td align="center" valign="top" width="200">
				<![endif]-->
					<div class="left-column">
						<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97150&w=200&h=150" alt=""align="center" />
					</div>
				<!--[if (gte mso 9)|(IE)]>
				</td>
				<td width="380">
				<![endif]-->
					<div class="right-column">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sagittis metus, non malesuada neque. Morbi condimentum commodo scelerisque. Nulla eleifend vitae nisl eget dapibus. Sed dolor nisl, viverra eget lorem quis, consequat volutpat massa. Maecenas ac iaculis lectus, egestas molestie erat.</p>
					</div>
				<!--[if (gte mso 9)|(IE)]>
				</td>
				</tr>
				</table>
				<![endif]-->
				</div>
				<p class="hide">This text is hidden on Mobile. Nulla eu dolor lacinia neque euismod luctus vel vel magna. Ut sit amet ex eros. Pellentesque sit amet augue ac odio scelerisque maximus vel et odio. Suspendisse pulvinar ornare neque, ut interdum velit molestie eu. Nulla suscipit sagittis nisi, vitae facilisis enim eleifend sit amet. In malesuada vitae risus sit amet malesuada. Maecenas at nisl et nisi tempus gravida at vitae nibh. Praesent ac porttitor libero.</p>
			</div>
			<div id="foot">
				<p class="foot-text">Some footer text</p>
			</div>
			<!--[if (gte mso 9)|(IE)]>
			</td>
			</tr>
			</table>
			<![endif]-->
		</div>
	</div>
</body>
</html>
	<html>
	<head>
	<style>
	/* useful resets for HTML emails */
	* {line-height: inherit;}
	.ExternalClass * { line-height: 100%; }
	body, p{margin:0; padding:0; margin-bottom:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;} img{line-height:100%; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} a img{border: none;} #backgroundTable {margin:0; padding:0; width:100% !important; } a, a:link, .no-detect-local a, .appleLinks a{color:#5555ff !important; text-decoration: underline;} .ExternalClass {display: block !important; width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: inherit; } table td {border-collapse:collapse;mso-table-lspace: 0pt; mso-table-rspace: 0pt;} sup{position: relative; top: 4px; line-height:7px !important;font-size:11px !important;} .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration: default; color: #5555ff !important; pointer-events: auto; cursor: default;} .no-detect a{text-decoration: none; color: #5555ff; pointer-events: auto; cursor: default;} {color: #5555ff;} span {color: inherit; border-bottom: none;} span:hover { background-color: transparent; }

	.nounderline {text-decoration: none !important;}
	</style>
	<!-- separate your reset and design css, because gmail.com strips out the whole STYLE tag which contains our resets -->
	<style>
	h1, h2, h3 { margin:0; padding:0; }
	p {Margin: 0px !important; }

	html, body {
	background:#eaeaea;
	margin:0;
	padding:0;
	font-size: 14px;
	font-family: Arial, sans-serif;
	}

	h1 {
	font-size:26px;
	line-height: 36px;
	padding: 5px;
	}

	p {
	font-size:14px;
	line-height:16px;
	padding:5px;
	}
	#body {
	font-family: Arial, sans-serif;
	font-size: 14px;
	background:#eaeaea;
	}

	.wrap {
	max-width:600px;
	width:100%;
	margin:0 auto;

	}

	.head {
	max-width:600px;
	height:auto;
	width:100%;
	}

	.headimg {
	max-width:600px;
	height:auto;
	width:100%;
	}

	#content {
	background:#ffffff;
	margin-top:10px;
	padding:10px;
	}

	.columns + p {
	clear:both;
	}

	.left-column {
	width:200px;
	float:left;
	}

	.right-column {
	width:380px;
	float:left;
	}

	#foot {
	text-align:center;
	}

	.foot-text {
	font-size:12px;
	}

	@media screen and (max-width: 599px) {

	.left-column {
	width:100%;
	float:none;
	text-align:center;
	}

	.right-column {
	width:100%;
	float:none;
	}

	.hide {
	display:none;
	}
	}
	</style>
	</head>
	<body>
	<div id='body'>
	<div class="wrap">
	<!--[if (gte mso 9)\|(IE)]>
	<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
	<tr>
	<td align="left" valign="top" width="600">
	<![endif]-->
	<div class="head">
	<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=600%C3%9750&w=600&h=50" alt="" class="headimg" />
	</div>

	<div id="content">
	<h1>Hybrid - Div and Table Based - HTML Email</h1>
	<p>In traditional web-based HTML we often use width and float on divs to create complex layout. The CSS properties are defined in the STYLE tag in the HEAD of the template.</p>
	<p>It follows a desktop first approach, which means that if device is less than 600px wide, then we overwrite some of the css properties so the content can be stacked under each other on mobile devices.</p>
	<p>On old Outlooks and on IE rendering engine based email clients, we can stabilize our code with conditional comments and TABLEs. (Those email clients do not support float and width properties on divs.)</p>
	<p>This email template is made for testing purposes described in the article titled: <br><a href="http://edmdesigner.com/blog/coding-responsive-html-emails-after-the-gmail-update">"Responsive Html Email and Gmail"</a> \| <a href="https://gist.github.com/ughoo/8fb946191cca5abd1143a1a4de82eecb">template on Gist</a></p>
	<br>
	<br>

	<div class="columns">
	<!--[if (gte mso 9)\|(IE)]>
	<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#ffffff">
	<tr>
	<td align="center" valign="top" width="200">
	<![endif]-->
	<div class="left-column">
	<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97150&w=200&h=150" alt=""align="center" />
	</div>
	<!--[if (gte mso 9)\|(IE)]>
	</td>
	<td width="380">
	<![endif]-->
	<div class="right-column">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sagittis metus, non malesuada neque. Morbi condimentum commodo scelerisque. Nulla eleifend vitae nisl eget dapibus. Sed dolor nisl, viverra eget lorem quis, consequat volutpat massa. Maecenas ac iaculis lectus, egestas molestie erat.</p>
	</div>
	<!--[if (gte mso 9)\|(IE)]>
	</td>
	</tr>
	</table>
	<![endif]-->
	</div>
	<p class="hide">This text is hidden on Mobile. Nulla eu dolor lacinia neque euismod luctus vel vel magna. Ut sit amet ex eros. Pellentesque sit amet augue ac odio scelerisque maximus vel et odio. Suspendisse pulvinar ornare neque, ut interdum velit molestie eu. Nulla suscipit sagittis nisi, vitae facilisis enim eleifend sit amet. In malesuada vitae risus sit amet malesuada. Maecenas at nisl et nisi tempus gravida at vitae nibh. Praesent ac porttitor libero.</p>
	</div>
	<div id="foot">
	<p class="foot-text">Some footer text</p>
	</div>
	<!--[if (gte mso 9)\|(IE)]>
	</td>
	</tr>
	</table>
	<![endif]-->
	</div>
	</div>
	</body>
	</html>