DIV based website structure
Let us consider that we want to create a layout as given below:
For creating this layout we require 5 <div> tags. One outer <div> tag and 4 inner <div> tags. The code for above layout is given below. Outer <div> tag is used to hold the layout to maintain proper formatting.
<html> <head> <title>DIV based website structure</title> </head> <body> <div style="width:900px; background-color:black; "> <div style="width:900px; height:100px; background-color:red;"> Layer 1 </div> <div style="width:100px; height:700px; background-color:green;"> Layer 2 </div> <div style="width:800px; height:700px; background-color:yellow;"> Layer 3 </div> <div style="width:900px; height:100px; background-color:blue;"> Layer 4 </div> </div> </body> </html>
Output of above code is given below.
Unlike table there are no rows and no columns. So each block created by <div> tag will be displayed one below the other. To create the desired layout we need to use two properties of CSS know as float and clear.
Floating creates layers. When we are considering relative positioning of layers then there are 3 layers : base, float:left and float:right. When we give float:left to a layer the base layer will be overlapped by the contents of the left floating layer. In the above code we will now give float:left to Layer 2 and Layer 3.
<html> <head> <title>DIV based website structure</title> </head> <body> <div style="width:900px; background-color:black; "> <div style="width:900px; height:100px; background-color:red;"> Layer 1 </div> <div style="width:100px; height:700px; background-color:green;float:left;"> Layer 2 </div> <div style="width:800px; height:700px; background-color:yellow;float:left;"> Layer 3 </div> <div style="width:900px; height:100px; background-color:blue;"> Layer 4 </div> </div> </body> </html>
Output:
But now Layer 4 is not visible. Layer 4 is displayed below Layer 2 and Layer 3 as it will not wait till floating is over. If we want Layer 4 to wait till floating of previous layers to complete and then display, we need to use clear property of CSS. It has three values : left, right and both. Clear:left will wait for floating to get over and then display.
<html> <head> <title>DIV based website structure</title> </head> <body> <div style="width:900px; background-color:black; "> <div style="width:900px; height:100px; background-color:red;"> Layer 1 </div> <div style="width:100px; height:700px; background-color:green;float:left;"> Layer 2 </div> <div style="width:800px; height:700px; background-color:yellow;float:left;"> Layer 3 </div> <div style="width:900px; height:100px; background-color:blue; clear:left;"> Layer 4 </div> </div> </body> </html>
Output:
Let us consider a variation in the above code. We now change the width of Layer 3 from 800px to 600px.
<html> <head> <title>DIV based website structure</title> </head> <body> <div style="width:900px; background-color:black; "> <div style="width:900px; height:100px; background-color:red;"> Layer 1 </div> <div style="width:100px; height:700px; background-color:green;float:left;"> Layer 2 </div> <div style="width:600px; height:700px; background-color:yellow;float:left;"> Layer 3 </div> <div style="width:900px; height:100px; background-color:blue; clear:left;"> Layer 4 </div> </div> </body> </html>
As we have reduced the width of Layer 3 now base layer is visible. We now give float:right to Layer 3. As a result Layer 3 will be floated to the right.
<html> <head> <title>DIV based website structure</title> </head> <body> <div style="width:900px; background-color:black; "> <div style="width:900px; height:100px; background-color:red;"> Layer 1 </div> <div style="width:100px; height:700px; background-color:green;float:left;"> Layer 2 </div> <div style="width:600px; height:700px; background-color:yellow;float:right;"> Layer 3 </div> <div style="width:900px; height:100px; background-color:blue; clear:left;"> Layer 4 </div> </div> </body> </html>
Output:
The base layer is now visible in between Layer 2 and Layer 3. Another variation is to decrease height of Layer 2 from 700px to 500px.
<html> <head> <title>DIV based website structure</title> </head> <body> <div style="width:900px; background-color:black; "> <div style="width:900px; height:100px; background-color:red;"> Layer 1 </div> <div style="width:100px; height:500px; background-color:green;float:left;"> Layer 2 </div> <div style="width:600px; height:700px; background-color:yellow;float:right;"> Layer 3 </div> <div style="width:900px; height:100px; background-color:blue; clear:left;"> Layer 4 </div> </div> </body> </html>
Output:
As Layer 4 will only wait for left floating therefore once left floating of Layer 2 is over immediately Layer 4 is attached below it. Layer 4 will not wait for Layer 3 as it is floated right. We have to set clear:both so that Layer 4 will wait till both the layers have completed floating.
<html> <head> <title>DIV based website structure</title> </head> <body> <div style="width:900px; background-color:black; "> <div style="width:900px; height:100px; background-color:red;"> Layer 1 </div> <div style="width:100px; height:500px; background-color:green;float:left;"> Layer 2 </div> <div style="width:600px; height:700px; background-color:yellow;float:right;"> Layer 3 </div> <div style="width:900px; height:100px; background-color:blue; clear:both;"> Layer 4 </div> </div> </body> </html>
Output:
Recent Comments