Creating Web Page Template By HTML div tag

You need to know CSS and HTML for this topic.

Now it is different piece from JavaScript but it is fundamental side of web page design. Creating a template makes your life easy while you are designing a web page since, you can easily shape your pages by adding some necessaries to template.

Today’s most common way to create a template is using div tag. Basically you define a container “division” that is the main division that includes the other container inside it. Then we add others respected to our design to its inside. Do not forget to give id or class name to each division to be specified for CSS. (Like as in the figure.)


Example HTML for such template;




But it is not enough to have this HTML code, also we need to use some CSS to define our divisions’ width and height.


CSS code
.container{
width: 960px;
background-color:#FFF;
height: 500px;
margin-left:auto;
margin-right:auto;
}

.left{
float: left;
width: 430px;
height: 490px;
background-color: #DFDFDF;
padding: 10px;
overflow:auto;
}

.right{
float: left;
width: 430px;
height: 490px;
background-color: #BFBFBF;
padding: 10px;
overflow:auto;
}


To see the resulted page click!

Share