Ankit Virparia » div http://ankit.co A Programmer, Designer and Trainer Sun, 11 May 2014 04:15:47 +0000 en-US hourly 1 https://wordpress.org/?v=4.0.38 Div based layout example http://ankit.co/tutorials/html/div-based-layout-example?utm_source=rss&utm_medium=rss&utm_campaign=div-based-layout-example http://ankit.co/tutorials/html/div-based-layout-example#comments Sun, 19 May 2013 17:59:13 +0000 http://ankit.co/?p=3466 In this tutorial we will consider two different layouts using div tag. Layout 1 Output: Layer 1 Layer 2 Layer 3 Layer 4 Layer 5 Layer 6 Layout 2 Output: Layer 1 Layer 2 Layer 3 Layer 4 Layer 5 Layer 6 Layer 7 Layer 8 Layer 9

The post Div based layout example appeared first on Ankit Virparia.

]]> In this tutorial we will consider two different layouts using div tag.

Layout 1

<html>
<head>
<title>Div based layout example</title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:100px; height:100px; background-color:red; float:left;">
	Layer 1
</div>
<div style="width:800px; height:100px; background-color:green; float:left;">
	Layer 2
</div>
<div style="width:900px; height:200px; background-color:yellow; clear:left;">
	Layer 3
</div>
<div style="width:700px; height:500px; background-color:blue; float:left;">
	Layer 4
</div>
<div style="width:200px; height:500px; background-color:#9900CC; float:left;">
	Layer 5
</div>
<div style="width:900px; height:200px; background-color:#39C; clear:left;">
	Layer 6
</div>
</div>
</body>
</html>

Output:

Layer 1
Layer 2
Layer 3
Layer 4
Layer 5
Layer 6
Layout 2

<html>
<head>
<title>Div based layout< example/title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:100px; height:150px; background-color:red; float:left;">
	Layer 1
</div>
<div style="width:800px; height:150px; background-color:green; float:left;">
	Layer 2
</div>
<div style="width:900px; height:100px; background-color:yellow; clear:left;">
	Layer 3
</div>
<div style="width:300px; height:200px; background-color:blue; float:left;">
	Layer 4
</div>
<div style="width:300px; height:200px; background-color:#666666; float:left;">
	Layer 5
</div>
<div style="width:300px; height:200px; background-color:#CC99CC; float:left;">
	Layer 6
</div>
<div style="width:700px; height:500px; background-color:#00FF99; float:left;">
	Layer 7
</div>
<div style="width:200px; height:500px; background-color:olive; float:left;">
	Layer 8
</div>
<div style="width:900px; height:100px; background-color:#39C; clear:left;">
	Layer 9
</div>
</div>
</body>
</html>

Output:

Layer 1
Layer 2
Layer 3
Layer 4
Layer 5
Layer 6
Layer 7
Layer 8
Layer 9

The post Div based layout example appeared first on Ankit Virparia.

]]> http://ankit.co/tutorials/html/div-based-layout-example/feed 0 HTML div tag http://ankit.co/tutorials/html/html-div-tag?utm_source=rss&utm_medium=rss&utm_campaign=html-div-tag http://ankit.co/tutorials/html/html-div-tag#comments Sun, 19 May 2013 04:33:45 +0000 http://ankit.co/?p=3439 <div> tag is also used in implementing wireframing. Difference between <div> and <table> based layout Table Div To create one block using table based layout we require 3 tags, they are: one <table> tag to define a table , one <tr> to define one row in the table and one <td> to define one cell […]

The post HTML div tag appeared first on Ankit Virparia.

]]> <div> tag is also used in implementing wireframing.

Difference between <div> and <table> based layout

Table

Div

To create one block using table based layout we require 3 tags, they are: one <table> tag to define a table , one <tr> to define one row in the table and one <td> to define one cell in that row.

To create one block using div based layout we require just one tag and that is <div> tag to define the block.

Number to tags required is more.

Number of tags required is less as just one tag is required to create one block.

Browser parsing is slow.

Browser parsing is fast.

SEO (search engine optimization) rank is low for table based layout.

SEO (search engine optimization) rank is high for div based layout.

Table based layout is controlled by its attributes.

Div based layout is controlled by CSS.

By default when we write a div tag it will not have any border which can separate one block from the other. Also the browser will allocate space according to the content of div.

In order to create a layout using html div tag we need to make use of CSS (Cascading Style Sheet) to assign width and height. We will make use of an inline CSS for controlling div alignments. For further reference on CSS refer article – How to write a CSS?

Consider the below given program to create a div having the following CSS properties : width, height, margin, background-color.

 <div style="width:450px; margin:0px auto; height:100px; background-color:red;">
This is a div.
</div>

Output:

This is a div.

The post HTML div tag appeared first on Ankit Virparia.

]]> http://ankit.co/tutorials/html/html-div-tag/feed 0