5 Ways To Display HTML DIVs Side By Side – Simple Examples

Welcome to a tutorial on how to display HTML DIVs side by side. So you are trying to arrange div containers in a horizontal manner, but having trouble doing so?

One of the easiest way to display two or more DIVs side-by-side is to use a flexible box:

  1. Place all the div into a container first – <div class="flexWrap"> <div>FIRST</div> <div>SECOND</div> </div>
  2. Then set the container to display as a flexible box – <style>.flexWrap { display: flex; }</style>

That covers the quick basics, but let us walk through a few more examples in this guide – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Side-By-Side Useful Bits
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

SIDE-BY-SIDE DIV CONTAINERS

All right, let us now get into the ways to create side-by-side div containers.

 

1) FLEXIBLE BOX

1-flexbox.html
<style>
/* (A) 3 COLUMNS ON BIG SCREENS */
.flexWrap {
  display: flex;
  width: 100%;
}
.flexCol {
  box-sizing: border-box;
  padding: 10px;
  width: 33.3%;
  background: #ffe2e0;
}
/* (B) BREAK DOWN 1 COLUMN ON SMALL SCREENS */
@media only screen and (max-width: 768px) {
  .flexWrap { flex-wrap: wrap; }
  .flexCol { width: 100%; }
}
</style>
 
<div class="flexWrap">
  <div class="flexCol">First</div>
  <div class="flexCol">Second</div>
  <div class="flexCol">Third</div>
</div>
First
Second
Third

The modern convenience called flexbox. Simply set the wrapper to display: flex, set the width of the columns, and that’s it – CSS pretty much does all the rest magically.

 

 

2) GRID LAYOUT

2-grid.html
<style>
/* (A) 3 COLUMNS ON BIG SCREENS */
.gridWrap {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 100%;
}
.gridCol {
  padding: 10px;
  background: #f3ffe0;
}
/* (B) BREAK DOWN 1 COLUMN ON SMALL SCREENS */
@media only screen and (max-width: 768px) {
  .gridWrap { grid-template-columns: 100%; }
}
</style>
 
<div class="gridWrap">
  <div class="gridCol">First</div>
  <div class="gridCol">Second</div>
  <div class="gridCol">Third</div>
</div>
First
Second
Third

Yet another modern CSS convenience. Simply set the wrapper to display: grid and define the columns grid-template-columns – Done, CSS does the rest of the magic again.

 

3) DISPLAY AS TABLE

3-table.html
<style>
/* (A) 3 COLUMNS ON BIG SCREENS */
.tableWrap {
  display: table;
  width: 100%;
}
.tableCol {
  display: table-cell;
  width: 33.3%;
  padding: 10px;
  background: #e0f8ff;
}
/* (B) BREAK DOWN 1 COLUMN ON SMALL SCREENS */
@media only screen and (max-width: 768px) {
  .tableWrap, .tableCol { display: block; }
  .tableCol { width: 100%; }
}
</style>
 
<div class="tableWrap">
  <div class="tableCol">First</div>
  <div class="tableCol">Second</div>
  <div class="tableCol">Third</div>
</div>
First
Second
Third

This should be pretty self-explanatory – We set the wrapper <div> to display as a <table>, and the <div> inside as <td>. Some “expert code ninjas” may not like this method as it seems like a “hack”, but it works. Period.

 

 

4) FLOATING DIVS

4-float.html
<style>
/* (A) 3 COLUMNS ON BIG SCREEN */
.floatWrap { width: 100%; }
.floatCol {
  float: left;
  box-sizing: border-box;
  width: 33.3%;
  padding: 10px;
  background: #f3e0ff;
}
/* (B) CLEARFIX - FLOATWRAP TO "MAINTAIN" 100% WIDTH */
.floatWrap { overflow: auto; }
.floatWrap::after {
  content: "";
  clear: both;
  display: table;
}
/* (C) 1 COLUMN ON SMALL SCREENS */
@media only screen and (max-width: 768px) {
  .floatCol {
    float: none;
    display: block;
    width: 100%;
  }
}
</style>
 
<div class="floatWrap">
  <div class="floatCol">First</div>
  <div class="floatCol">Second</div>
  <div class="floatCol">Third</div>
</div>
First
Second
Third

This is an old school method that we use, long before flex and grid are available. The whole idea is actually simple – We attach float: left to containers so that they detach from the original position and flushes to the left side.

But there is a problem with this – The <div class="floatWrap"> wrapper will “collapse” when all the children are floating, potentially destroying the layout of the entire page. This is where the “Clearfix” trick comes along, to maintain the “shape” of the wrapper.

 

5) INLINE BLOCK

5-inline-block.html
<style>
/* (A) 3 COLUMNS ON BIG SCREEN */
.blockWrap { width: 100%; }
.blockCol {
  display: inline-block;
  box-sizing: border-box;
  width: 33.3%;
  padding: 10px;
  background: #fffce0;
}
@media only screen and (max-width: 768px) {
  .blockCol {
    display: block;
    width: 100%;
  }
}
</style>
 
<div class="blockWrap">
  <div class="blockCol">First</div><!--
  --><div class="blockCol">Second</div><!--
  --><div class="blockCol">Third</div>
</div>
First
Second
Third

Lastly, this is yet another old school method. Containers that are set to dispkay: inline-block will be laid out left-to-right – A simple idea again, but there is just one problem. Any empty spaces and line breaks between inline-block containers will show as a “gap”. This is why we insert the “stupid” <!-- and --> to prevent “gaps” in between the containers.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

WHICH IS THE BEST METHOD?

Personally, I will stick with using modern CSS solutions – The flexbox and grid layout. They are well supported on most major browsers now, and they are just a breeze to work with.

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEAT SHEET

How to display HTML div side-by-side (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this short guide. I hope that it has helped to solve your positioning woes, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “5 Ways To Display HTML DIVs Side By Side – Simple Examples”

Leave a Comment

Your email address will not be published. Required fields are marked *