How to Position HTML Elements Side by Side with CSS

Photo by Nick Karvounis on Unsplash

Aligning HTML elements is one of the most common issues in CSS that developers deal with. There are a couple of ways that CSS provides for positioning elements and you need to decide for yourself which one to use, depending on your project.

In this post, I’m going to explore four different ways that CSS provides for positioning elements side by side.

1. Display: Inline-Block

The first way you can use is the display: inline-block method. This method is a simple and classic CSS technique for positioning elements side by side.

Inline or Block?

The important thing to understand before using this method is to see whether the element is a block-level element (like <div>, <p>) or an inline one (<span>, <a>).

First of all, you can use inline HTML elements and they will be automatically positioned side by side, but the restriction of inline elements is that width & height properties cannot be applied to them. On the other hand, we can apply width and height properties to block-level elements but the problem is that they cannot be placed side by side. That’s why, there is a third way that can be applied, which leads to changing the display behavior of an element to inline-block:

div, span {
  display: inline-block;
}

What inline-block does is place elements side by side (like inline elements) We can also assign width and height properties as we can do for block-level elements.

2. Using Floats

Another way to align elements side by side is by using floats. This is an older technique and there are many discussions on the web about whether using floats is still useful or not.

Should I Use Floats?

Honestly, it depends on your project. If all you want to do is to place elements side by side, using floats will do the trick. However, if your project is using a modern technique (like Flexbox, Grid, or maybe a framework like Bootstrap, etc.) then using floats may not be a good idea.

Usage

By using floats, you can either position elements on the left or on the right side of the page. Centering elements is not possible directly by using floats only because there is no “center” value for floats, but this can be done with other CSS properties.

div {
  float: left;
}

In addition, the float property will take the elements out of the normal document flow. This can cause a mess on your page and shift the rest of the elements under the floated elements so they will be partially visible or won’t be visible at all.

To prevent this, you should use the clear property right after the floated elements.

div {
  clear: both;
}

You can also watch the tutorial video of this post below:

Advanced Techniques: Flexbox or Grid

So far we’ve talked about the classic methods to solve this issue. Now let’s move on to more advanced techniques.

CSS provides two newer methods to solve the alignment problem as flexbox and grid. The advantage of using flexbox or grid is that they bring a wider, more flexible, and easy to use solution for the positioning problem. However, both of these techniques require more understanding because they have a lot of various features for alignment, so before using flexbox or grid in your project you need to either have some understanding about them or your project should be suitable for using one of these methods.

3. Flexbox

If you decide to use flexbox, firstly the elements must be wrapped by a parent element.

<div class="container">
  <p> 1 </p>
  <p> 2 </p>
  <p> 3 </p>
</div>

Then, when we assign the parent element (the container) a display: flex behavior, it will automatically position all of its child elements side by side:

.container {
  display: flex;
}

Besides, if you add child elements to a flex property and give a number (number 1, for example), all of the space will be divided equally:

p {
  flex: 1;
}

Flexbox makes it a lot easier to position elements with CSS if you have some understanding of how to use it.

4. Grid

CSS Grid is another alternative way of aligning elements side by side. It has similarities to Flexbox but has different rules and implementation.

First of all, as we did in the flexbox method, the elements should be inside a parent container:

<div class="container">
  <p> 1 </p>
  <p> 2 </p>
  <p> 3 </p>
</div>

After that, we change the display property of the parent element (container) to the grid:

.container {
  display: grid;
}

Next, we need to determine what the layout will look like. We can decide how many columns and rows there will be in our layout. Let’s say we want three columns for three elements, each positioned in one column and in the same row. To place the elements side by side, we define the grid-template-columns property and divide the empty field equally by giving a value of 1fr for each column:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Note: fr means fractional unit of space and is similar to the “flex“ property of flexbox.

Liked the article? Medium is a great platform that hosts thousands of great articles without showing any ads. Since Medium is ad-free, readers who love this platform can support it by becoming a member.

You can become a Medium member here and have unlimited access to every story on Medium. If you use the link right above, it will also support me as a writer, because I’ll earn a small commission from Medium. Thank you :)