Layout 

In the world of design, layout talked about how the arrangement of elements within a page correctly. Just like typography, there are so many elements to the layout, which certainly can not be discussed in this section alone. Discussion of the overall layout would require a separate book. We will only see the layout of the elements commonly found in web documents, and how to make these elements with HTML and CSS.

A web document generally have the following elements:


element Header 
As the name suggests, is an element that contains the title and other explanatory documents. Usually this element is loaded with website logo, global menus (such as login and logout), and the name of the currently displayed page.
element Navigation 
Navigation elements, which provide navigation access to other pages on the web.
element Sidebar 
Support element content, the content can be a navigational aide, or a variety of other things like a list of other content, advertisements, or additional menus. Sidebar can be left or right in the content, or even on the left and right of the content, according to the designer's creativity.
element content 
The main contents of web documents. Users usually come to the web to see the text that is in this section.
Footer elements 
The concluding section of the website, which may contain other information on the website, such as the use of the license, sitemap, or links to other websites.
How can we create a general layout as shown in the picture elements in the Document Layout above site? Before you create a layout, of course, we first have to know how to measure elements in the HTML. Because without being able to measure the elements correctly, we will not be able to make a nice layout.

                                                      For more information : here