Create a Responsive web page layout with HTML div tags

by Salitha Chathuranga July 23, 2017 3 Comments

Do you want to create a simple layout for your web site? Do you want to make it compatible in  a proper way with mobile devices? Here you have the solution.. Now I' going to tell you how to get rid of this task. You need only some knowledge on HTML and CSS. If you are not much comfortable, you can follow me now.

First you need to decide the design what you want to create because no standard template for a web page. There are only some common practices. The design I'm going to do is  shown below.

In my design I have designed it in a white container. first you find  the header part. Next you can see the menu bar which contains the pages of the web site, horizontally. Then comes the body part. It has been divided into two main parts including a  navigation and a mainbody part containing the content of the page. Then finally the footer part is included. Remember I use these mentioned names when I including styles in css file.

Create two files called  index.html and style.css. I think you are aware of file extensions.

Then start to code the  HTML file. As usual normal format is used. If you have problems  with the basic tags, visit here. In this design special tag is used called div tag. That is used to make separate sections and then separate styles can be added to those divisions using css. 


<!DOCTYPE html>
<html>
<head>
    <title>Website Layout</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-          scale=1.0">
</head>
<body>
<div class="container">
    <div class="header"></div>
    <div class="menu"></div>
    <div class="navigation"></div>
    <div class="mainbody"></div>
    <div class="footer"></div>
</div>
</body>
</html>

In the head part of the file, stylesheet is connected with the HTML file. Found a new tag after this tag, in the head of the HTML file? Is that meta tag? I think so. As I told before, this is a responsive design. So this meta tag is for that purpose.

When we come to the body part, I have included six div tags and introduced six classes for them for styling purposes. You can use either css class selector or css id selector. As I told before, the whole design is included in the container existing in the body of the page. So, open a div tag with class container and close it. Then jump inside of this div tags. Now coding the design is started! Create div tag with unique classes according to the order we find the sections in our target web page layout. Look at the order I have coded. Now we have the  structure of web page. Next we have to add styles to it and make it discoverable.

style.css file

body {
margin: 0;
}
.container {
width: 800px;
height: auto;
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
background-color: white;
}
.header {
height: 80px;
background-color: grey;
}
.menu {
height: 80px;
background-color: #F0F0F0;
}
.navigation {
width: 20%;
height: 500px;
background-color: #696A6C;
float: left;
}
.mainbody {
width: 80%;
height: 500px;
background-color: #D4D0D0;
float: right;
}
.footer {
height: 60px;
background-color: grey;
clear: both;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and 
(max-device-width : 480px) {

.container {
margin-top: 20px;
margin-bottom: 20px;

}
.header {
height: 80px;
width: 100%;
}
.menu {
height: 30px;
width: 100%;
}
.navigation {
width: 100%;
height: 80px;
}
.mainbody {
width: 100%;
height: 300px;
}
.footer {
width: 100%;
height: 60px;
}

}

Explanation :

Before we start, if you are a new comer to CSS, visit W3 CSS page. 

In the stysheet, first the body margin is set as 0. It allows to set up the page with no margins. Then we move to the container. Give values for width, height, color and margin as you want. This height is set to take the size automatically according to the content height within the container. Then give a color and an appropriate height for both the header and menu parts. Next comes the navigation section. Special property of this class is float. Values is assigned as left. It sends the navigation part to the left corner as the target template. Give a percentage for the width according to the full width of the web page. Remaining percent is reserved for mainbody division. 

After that we consider the mainbody part. Give a color and a height as you want. In this design, navigation and mainbody parts share the same height. Arrange this body part to the right corner by float property. Finally comes the footer section. The new property comes under the styles of footer is clear. It makes the footer in a place where after the above divided two parts comes to the end. Otherwise the footer will not be there. Try without clear tag. You will see the difference.

Responsive ???

Now you have the basic design of the web page. It is not responsive and gives the best output with the maximum screen width. Then we have to make it responsive. But how? First think of a mobile design how this layout can be re arranged. I use the following mobile version view.

Media Queries

This is  a part of css coding which makes the web pages responsive. This part consists of the changes should be done into each div section, to get the target mobile version view. Only the changes are included according to the each selector. In the above code, you can see some strange lines after the footer styles starts with @media. That is the media query. It should be included the width of the devices you are targeting. So the codes within media query with this width, only belongs to the devices with this width range. 

If you want to change the way how the layout looks  like according to various widths, you have to add and style more media  queries. Here I will only do the design for a small smart phone screen.

Simply you have to change mainly the width and height values. Then layout will be auto re-arranged. I have done it in each class. In addition to that have been changed in container class to align the layout properly within the container. After doing these changes, you will have the responsive web site layout!

Try to add more media queries and arrange the layout in different ways...
Good Luck!


3 Comments