Table Vs Div Layout

div based layout
Table VS Div Layout

CSS Layout using Div

<div> tag is used to group Block 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.
  • It default height is auto. Means Flexible to content inside.
  • Can be easily customized using CSS.

Create a Wrap Div

(How to write a CSS in HTML code)

		
<! DOCTYPE html>
<html>
<head>
<title>my webpage</title>
<meta charset="UTF-8">
<style>
*{
	margin:0px;
	padding:0px;
}
.wrap{
	width:960px;              /* Standard Width for Desktop and CRT Monitors*/
	height:auto;
	border:1px solid red;
}
</style>
<head>
<body>
	<div class="wrap">
		This is Wrapper of complete layout.
	</div>
</div>
</body>
</html>

Browser's view :

This is Wrapper of complete layout.


Insert Header

(How to write a CSS in HTML code)


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

Browser's view :

This is Header

Inserting Nav menu

(How to write a CSS in HTML code)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
	margin:0px;
	padding:0px;
}
.wrap{
	width:960px;             
	height:auto;
	border:1px solid red;
}
.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>

Browser's view :

This is Header
This is Navigation bar


Inserting Container

(How to write a CSS in HTML code)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
	margin:0px;
	padding:0px;
}
.wrap{
	width:960px;             
	height:auto;
	border:1px solid red;
}
.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>

Browser's view :

This is Header
This is Navigation bar




This is Container

 


Inserting Footer

(How to write a CSS in HTML code)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
	margin:0px;
	padding:0px;
}
.wrap{
	width:960px;             
	height:auto;
	border:1px solid red;
}
.header{
	height:150px;
	background:#333;
}
.nav{
	height:50px;
	background:#000;
}
.container{
	height:768px;
	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>
</div>
</body>
</html>

Browser's view :

This is Header
This is Navigation bar




This is Container
This is Footer


Inserting Left/ Right Container

(How to write a CSS in HTML code)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<style>
*{
	margin:0px;
	padding:0px;
}
.wrap{
	width:960px;             
	height:auto;
	border:1px solid red;
}
.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;    // Clear Both will clear floating from both sides.
}
.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>

Browser's view :

This is Header
This is Navigation bar




Left Container




Right Container
This is Footer