The division tag <div> defines a section in an html document and we can deploy a very simple procedure to design a multi-column web page. This method is the modern way of creating such a website theme. We follow the following simple steps to create a multi-column web page.

• Create a parent <div> element
• Create child <div> elements under the parent <div>: These make up the columns
• Float the child <div> elements to the left apply some padding and some width
• Finally clear the floats

The number of child <div> elements will determine how many columns will be included in the web page. In a four column layout the parent <div> element will host four child <div> elements.

HTM-CSS THREE COLUMN LAYOUT

Notice that the parent <div> has four child <div> elements and each is set to a width of 25% floated to the left and given a padding of 10px and after that we clear the floats with css. These are the three main properties that you need to create a multi-column layout. When you get the layout right you can proceed to add more css to beautify your sight.

STUDENT FORUM FOR WEB TECHNOLOGY

The division tag <div> defines a section in an html document and we can deploy a very simple procedure to design a multi-column web page. This method is the modern way of creating such a website theme. We follow the following simple steps to create a multi-column web page.

• Create a parent <div> element
• Create child <div> elements under the parent <div>: These make up the columns
• Float the child <div> elements to the left apply some padding and some width
• Finally clear the floats

The number of child <div> elements will determine how many columns will be included in the web page. In a three column layout the parent <div> element will host three child <div> elements.

HTM-CSS THREE COLUMN LAYOUT

Notice that the parent <div> has three child <div> elements and each is set to a width of 33% floated to the left and given a padding of 10px and after that we clear the floats with css.

STUDENT FORUM FOR WEB TECHNOLOGY

TWO COLUMN LAYOUT WEB PAGE DESIGN

The division tag <div> defines a section in an html document and we can deploy a very simple procedure to design a multi-column web age. This method is the modern way of creating such a website theme. We follow the following simple steps to create a multi-column web page.

• Create a parent <div> element
• Create child <div> elements under the parent <div>: These make up the columns
• Float the child <div> elements to the left apply some padding and some width
• Finally clear the floats

The number of child <div> elements will determine how many columns will be included in the web page. In a two column layout the parent <div> element will host two child <div> elements.

HTML TWO COLUMN LAYOUT

We want to focus on the <div class=”row”> element, this is the parent element that will host the child elements <div class=”column”></div> and <div class=”column”></div>. We assume that by default the width of the parent <div> is 100% so if we want to fit two columns in there each column should be set to a width of 50%. So that 50% + 50% = 100%. If we want to create a narrow side bar either on the left or right we can set any column to 25% and the other to 75%. If we want to fit three columns each will be 33.33% in width and 25% in width for four columns. Responsive website design is born of width defined in percentage. Avoid using figures like width: 300px.

STYLE THE COLUMNS

You see how simple it is. Float defines the position of the columns so the first will be displayed on the left side of the page the second is also displayed on the left side of the page only that it starts where the first one ends. Padding clears space between content and boundary of the element.

.row:after { content: “”; display: table; clear: both;} is used to clear the floats so that after the column span no other element is floated to the left. Otherwise it would try to force itself on the left of the last column if space was still available. Most of the times the footer tries to do this if floats are not cleared.

HTML TWO COLUMN LAYOUT COMPLETE CODE

We also have * { box-sizing: border-box;} and it is used with the universal select. It prevents padding from altering the width of the element. By default padding increases the dimensions of the element and distorts the layout. It can increase each column to 52% and the other will be forced down because the two widths longer add up to 100%.

The three and four column layout use the same principle and procedure what will just change is the number of columns. So if you get the two column layout right you can create any number of columns with ease.

TOP FIVE WEBSITE LAYOUTS

We want to make a stationed point and briefly look at the top five website layouts that are available for developers like you and me. The common layouts include a single column layout, the two column layout, the three column layout, the four column layout and the vertical navigation menu layout. We will briefly look at each one and then we will select one and create a responsive design using pure JavaScript and css media queries. Responsive design allows a web page to fit on any small screen.

SINGLE COLUMN LAYOUT WEB PAGE DESIGN

The division tag <div> defines a section in an html document or webpage. It is used to divide a web page into different and distinct sections. What you see on top of the page is exactly what we will be making. Our page is neat and presentable. This page is divided into a banner, a navigation menu, the main content area and the footer.

To create a single column layout we have the following skeleton html document with multiple <div> elements and each is responsible for a unique section of the web page.

HTML SINGLE COLUMN LAYOUT

W e have defined four <div> elements one for the header, one for the navigation, one for the main content and one for the footer. This is the simplest web layout and it is very easy to set up.

Once the set up is done the next step is to insert content and a navigation and add some simple css to style the page. We insert a simple navigation and some images.

HTML SINGLE COLUMN LAYOUT COMPLETE

You can run this code on your system with your own media images. You also can download all the layouts at the end of the session and compare them to your own creation from this guide. For now we are just working with images because we want to focus on the layout and not the content. you have to select the file to download it from dropbox.This is the simplest layout in the history of website design.