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