5 Ways to Display Divs Side by Side with CSS

Introduction

HTML Divs can be positioned next to each other in a variety of ways. In this article, we will learn 5 Ways to Display Divs Side by Side with CSS. Using a few CSS attributes is the fastest and easiest way to accomplish this. In HTML, there are two sorts of elements: inline and block. Inline elements allow placement of items close to each other but do not by default support height and width, whereas block elements allow the arrangement of block elements like two or more Divs side by side.

We have several options for aligning <div> elements side by side thanks to CSS. We’ll talk about a few popular methods. We’ll see how divs can be positioned next to one another.

Those five ways are:- Float, Flexbox, Grid, Inline-block, Inline grid/flex, etc.

Using float property

The float property is used to format and position content, for as letting an image float to the left of text within a container.

One of the following values may be present for the float property:

1. left- floats to the left of its container when an element is set to left.
2. right – The element floats in front of its container to the right.
3. none – The object isn’t floatable (will be displayed just where it occurs in the text).
4. inherit – The element takes on its parent’s float value.

The float property can be used to wrap text around pictures in its most basic form.

Let’s see how we can use float to display div elements side by side.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container{
  width: 100%;
}
.container .box {
  float: left;
  background: #FFFF00;
  width: 100px;
  height: 100px;
  margin: 5px;
  border: 1px solid red;
}

Clearing Floats

When you want an element to sit below a floated element, you must do this. Add the clear attribute to the element that needs to clear the float in order to do so. Normally, this comes after the floated element.

The left, right, or both can all be values for the clear attribute. You should typically utilize both.

Both is a keyword indicating that the element is moved down to clear past both left and right floats.

footer {
  clear: both;
}

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.

Then, to resolve this issue, we can add overflow: auto; to the containing element:

.clearfix {
  overflow: auto;
}

Should Float be used?

Depends on your project, in all honesty. Using floats will work if all you want to do is arrange components next to one another. However, using floats might not be a good option if your project uses contemporary methods (such as Flexbox, Grid, or perhaps a framework like Bootstrap, etc.).

Also Read Learn Media Queries in CSS

Using display: inline-block

One common use for the display: inline-block is to display list items horizontally instead of vertically. display: inline-block attribute makes it possible to align block elements side by side. An element you give an inline-block display to is inline by the presentation. However, it has the added benefit of allowing you to apply width and height, which you are unable to do when the element has an inline display given to it.

Therefore, you can think of the inline-block display as a combination of an inline element and a block element.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container{
  width: 100%;
}
.container .box {
  display: inline-block;
  width: 100px;
  Height: 100px;
  background: #FFFF00;
  border: 1px solid red;
}

Advanced Techniques

The alignment issue can be resolved using CSS’s grid and flexbox features. The benefit of employing grid or flexbox is that they provide a more comprehensive, adaptable, and user-friendly solution to the placement issue. However, because they have so many different features for alignment, both of these techniques require more understanding. As a result, before using flexbox or grid in your project, you either need to understand them or your project should be appropriate for using one of these methods.

Using flexbox

To lay out a group of things in one direction or another, you would utilize flexbox in a perfect world where all browsers supported it. The dimensions of the things in that one dimension, as well as the distance between them, should be under your control when you arrange your pieces. These are the purposes for which flexbox was intended.

In actuality, we also frequently employ Flexbox as a backup for Grid Layout, to gain alignment capabilities, and for tasks that might be better handled by Grid Layout.

Let’s look at how flexbox may position divs close to one another.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container{
  width: 100%;
  display: flex;
}
.container .box {
  background: #FFFF00;
  flex-basis: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 5px;
}

Using CSS grid

A grid is a collection of vertical and horizontal lines that cross to form columns and rows. Within these column and row lines on the grid, elements can be positioned.

By adding display: grid or display: inline-grid to an element, we may construct a grid container. All of that elements’ direct children turn into grid objects as soon as we do this.

Using a CSS grid, let’s examine how we may show divs side by side.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container{
  display: grid;
  grid-template-columns: 100px 100px 100px 100px; 
  grid-template-rows: 100px 100px 100px;
  grid-column-gap: 5px;
}
.container .box {
  background: #FFFF00;
  border: 1px solid red;
}

Attribute display: grid activates the grid’s organizational framework

By specifying 100px four times, the grid-template-columns property in the CSS file allows us to divide the page into the desired number of columns.

Space between grid items with the grid-gap property

The fact that you may provide space between grid elements without using padding or margin is a significant advantage of using a CSS grid.

You may automatically add space to your grid template by using the grid gap (or gap in newer browsers).

Using display table

These days, you won’t often utilize a display value of a table, but it’s still vital to understand. Before the invention of floats, Flex, and Grid, you would utilize them for layouts, hence it was more useful in the past. The element will behave like a table if its display property is set to table. So you don’t need to use the table element to create a copy of an HTML table.

Let’s look at how the display: table property can be used to display two div elements side by side.

<div class="table">
  <div class="table-row">
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
  </div>
</div>

.table{
  display: table;
  width: 40%;
}
.table-row {
  display: table-row;
  height: 100px;
}
.table-cell {
  background: #FFFF00;
  border: 1px solid red;
  display: table-cell;
  padding: 4px;
 }

Conclusion

You now have all the information required to display Divs side by side with CSS. All the different ways have been listed above. Thus everything now depends on the requirement that a person needs for his/her webpage.

Thanks for reading 5 Ways to Display Divs Side by Side with CSS, Hope you found this article helpful.