In this article, I will show you how to create a simple web page layout, using div tags and in combination with CSS properties.

Through this lesson you will learn how to create a separate style file to attach to an HTML page, create a separate image folder to store media data … this is the most basic division that you need to know.

Note : Since you have not learned tags like header, footer, article in HTML5, I will use the whole div tag.

Create folder structure for layout

First, create a folder for yourself, you can put it anywhere. Next create an images folder, an index.html file, and a style.css file.

Now use any editor to open the index.html and style.css files. Currently I am using Netbeans.

About the file structure, I explain a bit as follows :

• Folder images is used to contain all images for the interface.
• The index.html file is the main running file for the website.
• The styles.css file is used to store the CSS code

Simple HTML layout will be created in this post

First you need to understand the basic placements on a website. Take a look at the image below.

We have 7 basic positions that every website has, which are:

1. Logo => Contains main logo
2. Header => Contains the content of the top section.
3. Menu => Main menu section navigating the site
4. Left sidebar => The part containing the data on the left side of the website
5. Content => The part containing the main content of the website
6. Right sidebar => The part containing the data on the right side of the website
7. Footer => The bottom part of the web page.

Take a look at the structure of the freetuts.net website itself, the interface always has such positions.

Build HTML layout for layout

First we need to create a div tag that wraps all 7 positions. For each position we create an extra div tag to surround it.

 <div id="main_wrapper"> <div id="header"> Header </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> </div> <div id="footer"> Footer </div> </div>

Now I will write CSS to set the background for the positions, it will be easier to see when running this application.

 #header{ background: yellow; height: 100px; } #menu{ background: grey; height: 30px; } #main_content{ background: pink; } #footer{ background: red; height: 150px; }

The header, menu and footer positions are ok. As for the content, we have not finished processing, because the left_sidebar , right_sidebar and content need to be clearly separated.

We will use the float:left property to move the left_sidebar to the left, float:right to the right_sidebar to the right, and set their length to about 300px . Particularly for the content part, we will give margin-left and margin-right to be 300px , because the length of these two sidebars is 300px .

 #left_sidebar{ float:left; width: 300px; height: 400px; background: blue; } #right_sidebar{ float:right; width: 300px; height: 400px; background: orange; } #content{ margin-left: 300px; margin-right: 300px; height: 300px; background: #fff }

The Left sidebar and Right sidebar have overridden the footer . The reason is that we have set float:left and float:right for these two positions, causing them to be displayed hanging, so how much the footer is pushed down is decided by the Main Content . For this part, I have set the height to 300px , 400px lower than the sidebar sides. So it overrides the footer.

To solve this, we will put a next div below the content, then set CSS to clear:both .

 <div id="main_wrapper"> <div id="header"> Header </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> <div style="clear: both"></div> </div> <div id="footer"> Footer </div> </div>

Putting images into layout

Please notice, the index.html file will be one level out of the logo.png image file.

Now include it using the img tag. Please change the header to the following:

 <div id="header"> <img src="./images/logo.png"/> </div>

Put CSS in a separate file

We should put the CSS in a separate file to make it easier to manage later. Open the style.css file and copy all the CSS code there.

Next, import this style.css file into the index.html file by placing the following code in the head section.

 <link href="./style.css" rel="stylesheet"/>

Now we will have the entire code as follows :

 #header{ background: yellow; height: 100px; } #menu{ background: grey; height: 30px; } #main_content{ background: pink; } #footer{ background: red; height: 150px; } #left_sidebar{ float:left; width: 300px; height: 400px; background: blue; } #right_sidebar{ float:right; width: 300px; height: 400px; background: orange; } #content{ margin-left: 300px; margin-right: 300px; height: 300px; background: #fff }

 <!DOCTYPE html> <html> <head> <title>Layout HTML Basic</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./style.css" rel="stylesheet"/> </head> <body> <div id="main_wrapper"> <div id="header"> <img src="./images/logo.png"/> </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> <div style="clear: both"></div> </div> <div id="footer"> Footer </div> </div> </body> </html>

So you already know how to divide the layout for a website. Although this is a pretty basic part, it is very useful for those who are new to HTML. I will stop this article here, see you in the next post.