sharif2008/Draw 3 blocks of different height, place them side by side.html

## Draw 3 blocks of different height, place them side by side.html
<html>
<head>
	<style type="text/css">
		#container{
			display: block;
		}
		.div1{
			height: 300px;
			max-height: 100%;
			background-color: #36D7B7;
			display: inline-block;
			vertical-align: top;
		}
		.div2{
			height: 500px;
			max-height: 100%;
			background-color: #E9D460;
			display: inline-block;
			vertical-align: top;
		}
		.div3{
			height: 400px;
			max-height: 100%;
			background-color: #F64747;
			display: inline-block;
			vertical-align: top;
		}
		.content{
		  border: 1px solid black;
		  -moz-border-radius: 5px;
		  border-radius: 5px;
		  display: table;
		  height: 100%;
		  width: 400px;
		  margin: 0 auto;
		}

		.div1 > .content >div{
		  display: table-cell;
		  vertical-align: top;
		}
		.div2 > .content > div{
		  display: table-cell;
		  vertical-align: middle;
		}
		.div3 > .content >div{
		  display: table-cell;
		  vertical-align: bottom;
		}
		.title{
			font-size: 25px;
			text-align: center !important;
			margin: 0 auto !important;
			display: block;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class='div1'>
			<div class="content">
				<div>
					<b class="title" >TOP</b>
					<p>It is easier to read and understand. A programmer reading the first example might wonder, What does the number 52 mean here? Why 52? The programmer might infer the meaning after reading the code carefully, but it is not obvious. Magic numbers become particularly confusing when the same number is used for different purposes in one section of code.</p>


					<!--add  your changes after this-->
					<i>this is a paragar</i>

					<!--don't put anything after this-->
				</div>
			</div>
		</div>
		<div class='div2'>
			<div class="content">
				<div>
					<b class="title">MIDDLE</b>
					<p>It is easier to read and understand. A programmer reading the first example might wonder, What does the number 52 mean here? Why 52? The programmer might infer the meaning after reading the code carefully, but it is not obvious. Magic numbers become particularly confusing when the same number is used for different purposes in one section of code.	</p>

					<!--add  your changes after this-->

					<a href="#"> Hi </a>
					<!--don't put anything after this-->
				</div>
			</DIV>
		</div>
		<div class='div3'>
			<div class="content">
				<div>
					<b class="title">BOTTOM</b>
					<p>It is easier to read and understand. A programmer reading the first example might wonder, What does the number 52 mean here? Why 52? The programmer might infer the meaning after reading the code carefully, but it is not obvious. Magic numbers become particularly confusing when the same number is used for different purposes in one section of code.	</p>

					<!--add  your changes after this-->
					<h6>this is h6</h6>

					<!--don't put anything after this-->
				</div>
			</div>
		</div>
	</div>
</body>
</html>
	<html>
	<head>
	<style type="text/css">
	#container{
	display: block;
	}
	.div1{
	height: 300px;
	max-height: 100%;
	background-color: #36D7B7;
	display: inline-block;
	vertical-align: top;
	}
	.div2{
	height: 500px;
	max-height: 100%;
	background-color: #E9D460;
	display: inline-block;
	vertical-align: top;
	}
	.div3{
	height: 400px;
	max-height: 100%;
	background-color: #F64747;
	display: inline-block;
	vertical-align: top;
	}
	.content{
	border: 1px solid black;
	-moz-border-radius: 5px;
	border-radius: 5px;
	display: table;
	height: 100%;
	width: 400px;
	margin: 0 auto;
	}

	.div1 > .content >div{
	display: table-cell;
	vertical-align: top;
	}
	.div2 > .content > div{
	display: table-cell;
	vertical-align: middle;
	}
	.div3 > .content >div{
	display: table-cell;
	vertical-align: bottom;
	}
	.title{
	font-size: 25px;
	text-align: center !important;
	margin: 0 auto !important;
	display: block;
	}
	</style>
	</head>

	<body>
	<div id="container">
	<div class='div1'>
	<div class="content">
	<div>
	<b class="title" >TOP</b>
	<p>It is easier to read and understand. A programmer reading the first example might wonder, What does the number 52 mean here? Why 52? The programmer might infer the meaning after reading the code carefully, but it is not obvious. Magic numbers become particularly confusing when the same number is used for different purposes in one section of code.</p>


	<!--add your changes after this-->
	<i>this is a paragar</i>

	<!--don't put anything after this-->
	</div>
	</div>
	</div>
	<div class='div2'>
	<div class="content">
	<div>
	<b class="title">MIDDLE</b>
	<p>It is easier to read and understand. A programmer reading the first example might wonder, What does the number 52 mean here? Why 52? The programmer might infer the meaning after reading the code carefully, but it is not obvious. Magic numbers become particularly confusing when the same number is used for different purposes in one section of code. </p>

	<!--add your changes after this-->

	<a href="#"> Hi </a>
	<!--don't put anything after this-->
	</div>
	</DIV>
	</div>
	<div class='div3'>
	<div class="content">
	<div>
	<b class="title">BOTTOM</b>
	<p>It is easier to read and understand. A programmer reading the first example might wonder, What does the number 52 mean here? Why 52? The programmer might infer the meaning after reading the code carefully, but it is not obvious. Magic numbers become particularly confusing when the same number is used for different purposes in one section of code. </p>

	<!--add your changes after this-->
	<h6>this is h6</h6>

	<!--don't put anything after this-->
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>