<style type="text/css">  	#container{ 		background: #ffddaa; 		width: 100%; 		height: 100%; 		/*padding: 5%;*/  	} 	#top-left{ 		background: yellow; 		position: absolute; 	     top: 10px; 	     width: 20%; 	     left: 10px;       	height: 20%; 	} 	#top-right{ 		background: blue; 	 	position: absolute; 	     top: 10px; 	     width: 20%; 	     right: 10px; 	      height: 20%; 	 } 	#center_div { 	    position: absolute; 	    top: 0; 	    bottom: 0; 	    left: 0; 	    right: 0; 	    width: 20%; 	    height: 30%; 	    margin: auto; 	    background-color: #f3f3f3; 	} 	#bottom-left{ 		background: green; 	 	position: absolute; 	     bottom: 0; 	     width: 20%; 	     left: 0; 	      height: 20%; 	      margin-left: 10px; 	      margin-bottom: 8px; 	} 	#bottom-right{ 		background: red; 		position: absolute; 	     bottom: 0; 	     width: 20%; 	     right: 0;       	height: 20%; 		margin-right: 10px;       	margin-bottom: 8px;	       }  </style> <div id="container"> 	<div id="top-left">  	</div> 	<div id="top-right">  	</div> 	<div id="center_div"> 	 	</div> 	<div id="bottom-left"> 	 	</div> 	<div id="bottom-right"> 	 	</div> </div>