gyulanemeth/responsive-gmail-float-desktop-first-test.html

## responsive-gmail-float-desktop-first-test.html
<html>
<head>
	<style>
		.colored {
			color: blue;
		}
		#body {
			font-size: 14px;
		}

		.left,
		#left {
			float:left;
			width:200px;
			height:100px;
			background:#c92c1e;
		}
		.right,
		#right {
			float:right;
			width:200px;
			height: 100px;
			background: #2879cb;
		}


		.clear,
		#clear {
			width:100%;
			height:20px;
			overflow:hidden;
			background: #e8e3ce;
			clear:both;
		}

	@media screen and (max-width: 500px) {
		.colored {
			color:red;
		}

		.left,
		#left {
			float:none;
			width:100%;
		}
		.right,
		#right {
			float:none;
			width:100%;
		}
	}
	</style>
</head>
<body>
	<div id='body'>
		<p>Hi,this is the float test</p>
		<p class='colored'>
		This text is blue if the window width is
		below 500px and red otherwise.
		</p>

		<div class="left" id="left">
			100% x 100px | 200px x 100px and floating left above 500px
		</div>
		<div class="right" id="right">
			100% x 100px | 200px x 100px and floating right above 500px
		</div>

		<p>Aenean nunc nisi, fermentum vitae justo in, auctor malesuada mauris. Nam in tortor quis nibh pellentesque posuere. Cras sed faucibus diam, ultrices laoreet est. Phasellus ac nulla nec sapien pretium fringilla. Sed euismod vel orci ac mollis. Nunc id mauris leo. Nulla feugiat ullamcorper tellus, lobortis pellentesque nibh mattis ac. Curabitur a sapien aliquet, gravida leo ac, hendrerit tellus.</p>

		<div class="clear" id="clear">
			clear:both
		</div>

		<p>Quisque tempor lectus at mauris blandit pulvinar. Phasellus rhoncus sapien porta efficitur tempus. Suspendisse non erat eleifend, convallis metus sed, faucibus dui. Fusce diam risus, fringilla at pulvinar at, placerat sit amet nibh. Duis ut pellentesque massa. Sed sit amet odio molestie erat suscipit fermentum. Vivamus nec bibendum sapien. Suspendisse potenti.</p>
	</div>
</body>
</html>
	<html>
	<head>
	<style>
	.colored {
	color: blue;
	}
	#body {
	font-size: 14px;
	}

	.left,
	#left {
	float:left;
	width:200px;
	height:100px;
	background:#c92c1e;
	}
	.right,
	#right {
	float:right;
	width:200px;
	height: 100px;
	background: #2879cb;
	}


	.clear,
	#clear {
	width:100%;
	height:20px;
	overflow:hidden;
	background: #e8e3ce;
	clear:both;
	}

	@media screen and (max-width: 500px) {
	.colored {
	color:red;
	}

	.left,
	#left {
	float:none;
	width:100%;
	}
	.right,
	#right {
	float:none;
	width:100%;
	}
	}
	</style>
	</head>
	<body>
	<div id='body'>
	<p>Hi,this is the float test</p>
	<p class='colored'>
	This text is blue if the window width is
	below 500px and red otherwise.
	</p>

	<div class="left" id="left">
	100% x 100px \| 200px x 100px and floating left above 500px
	</div>
	<div class="right" id="right">
	100% x 100px \| 200px x 100px and floating right above 500px
	</div>

	<p>Aenean nunc nisi, fermentum vitae justo in, auctor malesuada mauris. Nam in tortor quis nibh pellentesque posuere. Cras sed faucibus diam, ultrices laoreet est. Phasellus ac nulla nec sapien pretium fringilla. Sed euismod vel orci ac mollis. Nunc id mauris leo. Nulla feugiat ullamcorper tellus, lobortis pellentesque nibh mattis ac. Curabitur a sapien aliquet, gravida leo ac, hendrerit tellus.</p>

	<div class="clear" id="clear">
	clear:both
	</div>

	<p>Quisque tempor lectus at mauris blandit pulvinar. Phasellus rhoncus sapien porta efficitur tempus. Suspendisse non erat eleifend, convallis metus sed, faucibus dui. Fusce diam risus, fringilla at pulvinar at, placerat sit amet nibh. Duis ut pellentesque massa. Sed sit amet odio molestie erat suscipit fermentum. Vivamus nec bibendum sapien. Suspendisse potenti.</p>
	</div>
	</body>
	</html>