Punjabi Revolution tutorial CSS web page layout using div tags

 

The CSS (cascased style sheet) is used for two purpose, one for styling the contents, like change the color format, font etc and for positioning the elements.

The positioning or layout of the HTML (Hyper Text Markup Language) is very important aspect of the web page. it is also the most tricky part as well. The reason is, the layout of the page decides whether it would be responsive on all devices or not. Withe inventions of smart phones and tablets, the web pages are no more written written solely for desktop computers. Rather, they are tweaked to be equally adjustable on all devices.

The DIV tag of HTML revolutionized the layout philosophy. Previously, table was used to render the HTML elements.

With the help of DIV tag, we have more freedom,more re-usability and more modularity.  The div tag is a block element, i.e. it implicitly puts a line break before and after just like H1 tag.

In this tutorial, we would make the layout of a conventional website with top banner, left menu, central contents and bottom footer. Although, it is not quite responsive as we are going to fix the total width of the website main area, yet it is a nice example to understand the philosophy and usage of div tags.

First of all we put a div tag inside body tag of the page as below.

This way, it would not be visible, to make visible we would set wits width height and the border in using css as below.

In border property, the first argument 2px shows the thickness, the solid is style of the border  and the blue is the border color. By default, the 800 X 600 area with blue border would be left aligned. To align it in the center, we make the margin-left and margin-righ as auto. Please note, where we would need to make an object in the center/middle, we can achiever its left/ right of top/bottom margin as auto. So it would automatically adjust itself accordingly. With this piece of code we would get the following look.

main div
main div

 

 

 

 

 

Next we divide the main area horizontally with three divs, top one for banner, the middle one for menu and contents and the bottom one for footer. Below is the HTML code for the divs.

and here is the style for these DIVs.

I set different colors as background so that they stand out. The would cover all the space available horizontally but vertically, they top div would get 20%, the middle div 70% and the remaining 10% would be covered by the footer div.

In next step, we partition the middle div into left menu dive and right contents div.

 

As you know div is a block element, so the DIVs are rendered vertically. so to render the contents after the menu div horizontally, we would set the float: left property of menu div. this way the content div would be horizontally placed with menu div. Still there is a problem. The content would be written in middle div at the right location but the couter of content div would actually start where the menu start. so to overcome this problem, we would set the left margin for content div equal to the width of the menu div. Now, guess what is the width of menu div. Let’s calculate,

Total width = 800 px,

menu div = 20% of 800 px = 160 px.

So we set the property margin-left: 160px; for content div. Here is the final look.

final-look-css-layout
final-look-css-layout

And here

 

 

 

 

And here is the final and complete code.

 

Leave a Reply

Your email address will not be published. Required fields are marked *