TWO COLUMN LAYOUT

Posted on by

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

TWO COLUMN LAYOUT BASIC DOCUMENT
<!DOCTYPE html>
<html lang = “en”>
<head> <title>CSS Website Layout</title>
<meta charset = “utf-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
</head>
<body>  
<div class=”head”></div>  
<div class=”nav”></div>  
<div class=”row”>     
    
<div class=”column”></div>       
<div class=”column”></div>  

</div>  
<div class=”footer”></div>
</body>
</html>  

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

CSS TO STYLE THE COLUMNS
.column {float: left; width: 50%; padding: 5px;}  
.row:after { content: “”; display: table; clear: both;}

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

TWO COLUMN LAYOUT COMPLETE HTML-CSS DOCUMENT
<!DOCTYPE html>
<html lang=”en”>
<head> <title>CSS Website Layout</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
* { box-sizing: border-box;}  
body {width:60%; margin: 50px auto; border:solid gray; border-width:2px; border-radius:5px; padding:5px; background:#333;}  
.header {padding: 5px;text-align: center;}  
.head {padding: 5px;}   .nav {width: 100%; margin:auto; text-align: center; padding:10px;}   .nav a { font-size:16px; text-align:justify; font-weight:bold;text-decoration:none; padding: 10px 12px; color:#bbb;}  
.column {float: left; width: 50%; padding: 5px;}  
.row:after { content: “”; display: table; clear: both;}  
.footer{padding: 5px;text-align: center;}  
img{border:solid gray; border-width:1px; padding:5px; width:100%;}    

</style>
</head>
<body>    
<div class=”head”><img src = “image/advertisement.jpg”></div>  
<div class=”nav”>              
<a href=”#” >HONE</a>                                                          
<a href=”#”>NIPA</a>                        
  <a href = “#”>APEX</a>                     
  <a href=”#”>CBU</a>                                                      
  <a href=”#”>UNZA</a>              
  <a href=”#”>KATUNJILA</a>                                                           
  <a href=”#”>MULUNGUSHI</a>             
   <a href=”#”>RIDGEWAY</a>
</div>  
<div class=”row”>  
 
<div class=”column”><img src = “image/sc.jpg”></div>  
<div class=”column”><img src = “image/sc.jpg”></div>  

</div>  
<div class=”footer”><img src = “image/a.jpg”></div>  
</body>
</html>  

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.

Leave a comment