DIV Based Layout | Website Design using div

To Design a Website or webpage, we need basic knowledge of HTML and CSS. HTML along with CSS can design a webpage (in HTML5). Till XHTML/HTML4, html tables were used to design a webpage which is hard to maintain and complex in structure. Also table based layouts are slow.

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

div is a block level Element.
div is used to group block elements.
By default, div width is 100% of parent.
div's height is auto. Means flexible to content inside.
div can be easily customized using CSS.

Create a container

This is Container of layout.

		
<!doctype html>
<html>
<head>
<title>my webpage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
    margin:0;
}
.container{
	width:1200px;
	background:#ddd;
}
</style>
<head>
<body>
    <div class="container">
        This is Container of layout.
    </div>
</body>
</html>

Insert Header

This is Header


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

Insert Navbar

This is Header

This is Navigation bar


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

Insert Main

This is Header

This is Navigation bar

This is Main


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my webpage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
	margin:0;
}
.container{
	max-width:1200px;             
	margin:auto;
	background:#ddd;
}
header{
	height:150px;
	background:#333;
}
nav{
	height:50px;
	background:#000;
}
main{
	height:500px;
	background:#ccc;
}
</style>
<head>
<body>
	<div class="container">
		<header></header>
		<nav&quo</nav>
		<main></main>
	</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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my webpage</title>
<style>
*{
	margin:0;
}
.wrap{
	max-width:1200px;             
	margin:auto;
	background:#ddd;
}
header{
	height:150px;
	background:#333;
}
nav{
	height:50px;
	background:#000;
}
main{
	height:500px;
	background:#ccc;
}
footer{
	height:80px;
	background:#ccc;
}
</style>
<head>
<body>
	<div class="container">
		<header></header>
		<nav&quo</nav>
		<main></main>
		<footer></footer>
	</div>
</body>
</html>

Insert aside and section in main

This is Header

This is Navigation bar

Left Container

Right Container

This is Footer


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my webpage</title>
<style>
*{
	margin:0;
}
.container{
	max-width:1200px;             
	margin:auto;
	background:#ddd;
}
header{
	height:150px;
	background:#333;
}
nav{
	height:50px;
	background:#000;
}
main{
	background:#ccc;
}
aside{
	width:25%;
	height:200px;
	float:left;
	background:#333;
}
section{
	width:75%;
	height:200px;
	float:left;
	background:#ccc;
}
.clear{
	clear:both;    
}
footer{
	height:80px;
	background:#ccc;
}
</style>
<head>
<body>
	<div class="container">
		<header></header>
		<nav></nav>
		<main>
			<aside></aside>
			<section></section>
			<div class="clear"></div>
		</div>
		<footer></footer>
	</div>
</body>
</html>