THREE COLUMN LAYOUT

Posted on by

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

THREE COLUMN LAYOUT
<!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: 33.33%; 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=”header”><img src = “image/0004.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=”head”><img src = “image/advertisement.jpg”></div>  
<div class=”row”>
   
<div class=”column”><img src = “image/sc.jpg”></div>
 <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>

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

Leave a comment