Table Vs Div Layout

div based layout
Table VS Div Layout

CSS Layout using Div

<div> tag is used to group block and inline level elements and to create divisions in a webpage. Before 2004, we were using Table Based Layouts. But After 2004, Div based layout become popular. Div can render fast as compare to table, thus improve page performance. Div can create both Liquid Layouts and fixed Layouts. Here we'll learn how to create a fixed layout of a Webpage using <div> tag and CSS.

Properties of Div tag

  • It is a block level Element.
  • Used to group other block Elements.
  • By default, its width is 100% of parent.
  • Its default height is auto. Means Flexible to content inside.
  • Can be easily customized using CSS.

Create a Wrap Div

This is Wrapper of complete layout.

		
<!doctype html>
<html>
<head>
<title>my webpage</title>
<meta charset="UTF-8">
<style>
*{
    margin:0px;
}
.wrap{
	width:960px;
	background:#ddd;
}
</style>
<head>
<body>
    <div class="wrap">
        This is Wrapper of complete layout.
    </div>
</body>
</html>


Insert Header

This is Header


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
	margin:0px;
}
.wrap{
	width:960px;  
	margin:auto;           
	background:#ddd;
}
.header{             
	height:150px;
	background:#333;
}
</style>
<head>
<body>
    <div class="wrap">
        <div class="header"></div>
    </div>
</div>
</body>
</html>

Inserting Nav menu

This is Header
This is Navigation bar


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
	margin:0px;
}
.wrap{
	width:960px;             
	margin:auto;
}
.header{
	height:150px;
	background:#333;
}
.nav{
	height:50px;
	background:#000;
}
</style>
<head>
<body>
	<div class="wrap">
		<div class="header"></div>
		<div class="nav"></div>
	</div>
</div>
</body>
</html>


Inserting Container

This is Header
This is Navigation bar




This is Container


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
	margin:0px;
}
.wrap{
	width:960px;             
	margin:auto;
	background:#ddd;
}
.header{
	height:150px;
	background:#333;
}
.nav{
	height:50px;
	background:#000;
}
.container{
	height:768px;
	background:#ccc;
}
</style>
<head>
<body>
	<div class="wrap">
		<div class="header"></div>
		<div class="nav"></div>
		<div class="container"></div>
	</div>
</div>
</body>
</html>

Insert Footer

This is Header
This is Navigation bar




This is Container
This is Footer


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
	margin:0px;
}
.wrap{
	width:960px;             
	margin:auto;
	background:#ddd;
}
.header{
	height:150px;
	background:#333;
}
.nav{
	height:50px;
	background:#000;
}
.container{
	height:300px;
	background:#ccc;
}
.footer{
	height:80px;
	background:#ccc;
}
</style>
<head>
<body>
	<div class="wrap">
		<div class="header"></div>
		<div class="nav"></div>
		<div class="container"></div>
		<div class="footer"></div>
	</div>
</body>
</html>


Inserting Left/ Right Container

This is Header
This is Navigation bar




Left Container




Right Container
This is Footer


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
	margin:0px;
}
.wrap{
	width:960px;             
	margin:auto;
	background:#ddd;
}
.header{
	height:150px;
	background:#333;
}
.nav{
	height:50px;
	background:#000;
}
.container{
	background:#ccc;
}
.left{
	width:30%;
	height:200px;
	float:left;
	background:#333;
}
.right{
	width:70%;
	height:200px;
	float:left;
}
.clear{
	clear:both;    
}
.footer{
	height:80px;
	background:#ccc;
}
</style>
<head>
<body>
	<div class="wrap">
		<div class="header"></div>
		<div class="nav"></div>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
			<div class="clear"></div>
		</div>
		<div class="footer"></div>
	</div>
</div>
</body>
</html>