In this post, I want to talk about how to make five different ways multicolumn layouts with HTML and CSS. Each way has its pros and cons. To make more clear and how layouts will look like I have created a simple website that uses HTML tables, CSS float property, CSS framework, CSS flexbox, and CSS grid.

Let's see how to create a website layout with HTML and CSS

1) Tables: 

Once the HTML tables method was the only method to create a website layout. Using tables for layout creation is intuitive. When using tables, don't even need to use a separate CSS stylesheet. And the important thing is that they don't break.

For example:

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Table Layout</title>
</head>
<body >
    <table>
        <tr>
            <td colspan="2">
                <h1>Table based layout</h1>
            </td>
        </tr>
        <tr class='second-row'>
            <td class='second-data' >
                <ul>
                    <li><a href="#" style="color:#333;">Home</a></li>
                    <li><a href="#" style="color:#333;">About</a></li>
                    <li><a href="#" style="color:#333;">Contact</a></li>
                </ul>
            </td>
            <td class='third-data'>
                <h2>Welcome to our site</h2>
                <p>Here you will learn how to create websites...</p>
            </td>
        </tr>
        <tr>
            <td class='fourth-data' colspan="2">
                <p>copyright &copy; tutorialrepublic.com</p>
            </td>
        </tr>
    </table>
</body>
</html>

CSS


   body{
     margin:0px;
   }
   table{
     width:100%; 
     border-collapse:collapse;
     font:14px Arial,sans-serif;
   }
   td{
     padding:10px 20px;
     background-color:#acb3b9;
   }
   h1{
     font-size:24px;
   }
  
 .second-row{
     height:170px;
   }
   .second-data{
     width:20%;
     padding:20px;
     background-color:#d4d7dc;
     vertical-align: top;
   }
   ul{
     list-style:none;
     padding:0px;
     line-height:24px;
   }
  .third-data{
    padding:20px;
    background-color:#f2f2f2;
    vertical-align:top;
   }
  .fourth-data{
    padding:5px;
    background-color:#acb3b9;
    text-align:center;
   }
   

2) Float: 

Float is a CSS property which uses to create a website layout. Float is very easy to learn. For using float property you just need to know how to float and clear properties work together mainly. Float element tied to document flow, which may harm the flexibility. 

we have created a header with two columns/boxes and a footer by using float layout and other CSS properties.It is also fully responsive.You can try by resizing browser window to see the responsive effect.

For example:

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<title>Float layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
  <h2>Countries</h2>
</header>
<section>
  <nav>
    <ul>
      <li><a href="#">Germany</a></li>
      <li><a href="#">Estonia</a></li>
      <li><a href="#">Latvia</a></li>
    </ul>
  </nav>
  <article>
    <h1>About Germany</h1>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis alias repudiandae unde quo error quam aut voluptatem officiis? Beatae vitae error amet aspernatur in explicabo tenetur doloribus alias! Beatae, ex! </p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem cum tenetur ullam voluptatum nemo saepe officia atque cupiditate corporis minima iusto quis, ducimus, porro, culpa maxime. Accusantium voluptate provident vero.</p>
  </article>
</section>
<footer>
  <p>@copy right 2021</p>
</footer>
</body>
</html>

CSS:


* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  height: 300px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}
/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}
article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}
/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}
/* use media query for responsive design */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
h1

3) CSS Frameworks:

These work the same way as JavaScript frameworks. Just add the source file to your header (using <link rel="stylesheet" type="text/css" href="stylesheets/framework_file.css">, for example) and it's ready to go! There is no need to write your own properties. Just use the classes that framework developers prepared for you.

There are many HTML,CSS and JS frameworks such Bootstrap,Foundation,Bulma,Ulkit,Semantic UI,Materialize,etc.Among them Bootstrap is the most popular and used HTML,CSS and JS framework for developing responsive,mobile-first website.In this tutorial I am going to create simple webpage template by using Bootstrap framework

For example:

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>
</html>

Custom CSS


/* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
    

4) CSS Flexbox layout:

Flexbox is a set of properties in CSS introduced in 2009 to provide a new exceptional layout system.The flexbox module is identified as a part of the third version of CSS which called CSS3.Before flexbox,developer used to make website layout by using float or table layout techniques.But flexbox came out with lots of great properties which very useful for making websit layout at this moment.Flexbox is very popular to make one-dimensional type of website layout.

In this tutorial I am going to make a very simple responsive website layout by using flexbox.Here I used sementic HTML element such as header,section,article,nav,aside and footer.Just copy the below HTML and CSS code in your code editor and open it on the browser to see the output.

For example:

HTML:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Layout</title>
</head>
<body>
<header>Header</header>
  <section id="main">
    <article>Article</article>
    <nav>Nav</nav>
    <aside>Aside</aside>
  </section>
  <footer>Footer</footer>
    
</body>
</html>

CSS


* {
    box-sizing: border-box; 
  }
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
  }
  #main {
    display: flex;
    flex: 1;
  }
  #main > article {
    flex: 1;
    order: 1;
  }
  #main > nav, 
  #main > aside {
    flex: 0 0 20vw;
  }
  #main > nav {
    background: #D7E8D4;
    order: 3;
  }
  #main > aside {
    background: beige;
    order: 2;
  }
  header, footer {
    background: yellowgreen;
    height: 20vh;
  }
  header, footer, article, nav, aside {
    padding: 1em;
  }
  

5) CSS Grid layout:

CSS Grid is a modern and most powerful layout technique which is available in CSS that allows designing a web page using a grid-based layout system. CSS grid is a two-dimensional system as compared to other design elements like using flexbox. CSS grid layout helps web developers in the alignment of web elements according to needs and the elements can be divided into different regions with relationships such as size, layer, position, etc. Doing some changes in the Grid layout system won’t affect the other elements. CSS grid layout system is different from CSS frameworks available and it allows web developers more freedom in terms of design.

In this tutorial I am going to make fully responsive website layout by using CSS grid.Let's start..

For example:

HTML:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel="stylesheet">
    <title>Grid Layout</title>
</head>
<body>
<div class="container">
  <nav>Navbar</nav>
  <main>Main</main>
  <div id="sidebar">Sidebar</div>
  <div id="content1">Content1</div>
  <div id="content2">Content2</div>
  <div id="content3">Content3</div>
  <footer>Footer</footer>
</div>
    
</body>
</html>

CSS


  :root {
  --main-radius: 5px;
  --main-padding: 5px;
}

body {
  font-family: "Inter", sans-serif;
}

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
  grid-template-areas:
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content1 content2 content3"
    "sidebar footer footer footer";
  grid-gap: 0.2rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  color: #004d40;
  text-align: center;
}

nav {
  background: #a7ffeb;
  grid-area: nav;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

main {
  background: #84ffff;
  grid-area: main;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#sidebar {
  background: #18ffff;
  grid-area: sidebar;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

#content3 {
  background: #73ffba;
  grid-area: content3;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

footer {
  background: #1de9b6;
  grid-area: footer;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}

@media only screen and (max-width: 550px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "content1"
      "content2"
      "content3"
      "footer";
  }
}