0
Layout 1
Layout 2
Div based layout example
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
Recent Comments