In modern web, we can design a layout using so many techniques. Here are some popular layout desiging techniques in css.

Type of css layouts

  1. Table based layouts
  2. Float based layout
  3. CSS Flexbox
  4. Grids

Before we had css, layouts were designed using html table tag. But with the introduction of CSS, we use div tag to build float based layouts. These layouts are still in demand as they supported all browsers including IE8 and below. Div based layouts are also responsive. And now with CSS3, we can also design a layout using Flexbox or Grids.

CSS Layout Overview

CSS Layout

Steps to create a website

  1. Create a html page
  2. Add a wrap class
  3. Add CSS to html
  4. Add two columns in container
  5. Add navigation menu
  6. W3C Validation test

Create a html page

Website design starts with html first. Create a webpage first with doctype, html tag, head, body and necessary elements. See example

<!doctype html>    
<html lang="en"> 
<head>    
    <title>CSS Layout</title>    
    <meta charset="utf-8">    
</head>    
<body>    
</body>    
</html>    

Add a Container

Create a container class in body. The container is a container or wrapper to group page header, nav, container and footer. The width of wrap will be 960px or 1200px and will align in center of body.

<!doctype html>    
<html lang="en"> 
<head>    
    <title>CSS Layout</title>    
    <meta charset="utf-8">    
</head>    
<body>    
    <div class="container">  
        <div class="header"> header </div>  
        <div class="nav"> nav </div>  
        <div class="main"> main content </div>  
        <div class="footer"> footer </div>  
    </div>    
</body>    
</html>    

Add CSS to Html

Now lets add some css to our html page. CSS can be used in external or internal form. For multipage website, use external css, but for single page website, we can use internal css.

Header
Nav
Main
Footer

<!doctype html>    
<html lang="en"> 
<head>    
<title>CSS Layout</title>    
<meta charset="utf-8">  
<style>  

*{ margin:0; box-sizing:border-box;}

body{
    font:16px/1.3 sans-serif;
}

.container{ 
    width:1200px;
    margin:auto;
}

.header{
    background:#faa;
    padding:10px;
}
.nav{
    background:#333;
    padding:10px;
    color:#fff;
}
.main{
    background:#afa;
}
.footer{
    background:#aaf;
    padding:10px;
}
</style>  
</head>    
<body>    
    <div class="container">  
        <div class="header"> header </div>  
        <div class="nav"> nav </div>  
        <div class="main"> main content </div>  
        <div class="footer"> footer </div>  
    </div>    
</body>    
</html>    

Add Left and right divisions in main content

Now lets add some css to our html page. For left column, use div with class aside with width 25%. Now add another div with class section with width 75%.

After aside and section divs, do not forget to add a class clear to clear both.

Header
nav
Aside
Section
Footer

<!doctype html>    
<html lang="en"> 
<head>    
<title>CSS Layout</title>    
<meta charset="utf-8">  
<style>  

*{ margin:0; box-sizing:border-box;}

body{
    font:16px/1.3 sans-serif;
}

.container{ 
    width:1200px;
    margin:auto;
}

.header{
    background:#faa;
    padding:10px;
}
.nav{
    background:#333;
    padding:10px;
    color:#fff;
}
.main{
    background:#afa;
}
.aside{
    width: 25%;
    float:left;
    padding:10px;
    background:#afa;
}
.section{
    width: 75%;
    float:left;
    padding:10px;
    background:#ccc;
}
.clear{
    clear:both;
}
.footer{
    background:#aaf;
    padding:10px;
}
</style>  
</head>    
<body>    
    <div class="container">  
        <div class="header"> header </div>  
        <div class="nav"> nav </div>  
        <div class="main">
            <div class="aside">aside</div>
            <div class="section">section</div>
            <div class="clear"></div>
        </div>  
        <div class="footer"> footer </div>  
    </div>    
</body>    
</html>    

Now lets create a navigation menu. Create a UL ( unordered list) with five li elements and a hyperlink in each li.

Header
Aside
Section
Footer

<!doctype html>    
<html lang="en"> 
<head>    
<title>CSS Layout</title>    
<meta charset="utf-8">  
<style>  

*{ margin:0; box-sizing:border-box;}

body{
    font:16px/1.3 sans-serif;
}

.container{ 
    width:1200px;
    margin:auto;
}

.header{
    background:#faa;
    padding:10px;
}
.nav{
    background:#333;
    padding:10px;
    color:#fff;
}
.nav ul{
    list-style:none;
    padding:0;
}
.nav ul li{
    float:left;
    margin-right:10px;
}
.nav ul li a{
    color:inherit;
    display:block;
    padding:8px 12px;
}
.main{
    background:#afa;
}
.aside{
    width: 25%;
    float:left;
    padding:10px;
    background:#afa;
}
.section{
    width: 75%;
    float:left;
    padding:10px;
    background:#ccc;
}
.clear{
    clear:both;
}
.footer{
    background:#aaf;
    padding:10px;
}
</style>  
</head>    
<body>    
    <div class="container">  
        <div class="header"> header </div>  
        <div class="nav"> nav </div>  
        <div class="main">
            <div class="aside">aside</div>
            <div class="section">section</div>
            <div class="clear"></div>
        </div>  
        <div class="footer"> footer </div>  
    </div>    
</body>    
</html>    

W3C Validation Test

We have to follow W3C web standards while coding. Try to test your final layout on w3c validator. To do this, follow steps below.

W3C Validation test

  1. Open w3c validator.
  2. Click second tab, i.e, Validate by File Upload.
  3. Upload your file from system.
  4. Press Check button to validate.
  5. Check errors and warning in red and yellow backgrounds.