How to Place DIV side by side using CSS (flexbox example)

It’s a very common question asked by web developers and there are many ways to do this. You can use CSS float property to put the elements side by side or use the display property with the inline-block value. However, there is another simple and (more) effective way to do this using CSS3 Flexbox Layout also known as Flexible Layout module.

In one of my previous articles, I have discussed in-depth about CSS3 Flexbox and its many features and I’ve shared few examples explaining how to reverse the order of HTML elements using only CSS.

Place DIV side-by-side using CSS3 Flexbox

Here's an example.

<style>
    div 
    { 
        display: flex;
        border: solid 1px red;
        padding: 5px;
        gap: 10px;
    }
</style>

<body>
  <div>
    <div> div 1 </div>
    <div> div 2 </div>
    <div> div 3 </div>
  </div>
</body>

Try it

I have a parent <div> with 3 child <div> elements. In the <style> section, I have defined the Div's display property as flex. This applies to all the <div> elements. It will show all the <div> (especially the child) elements placed side-by-side, in a horizontal line.

Adding Space Between Flex Items with gap

Please Note: I have use the gap property with flex in all the examples here.

When you place multiple elements side by side using Flexbox, you may want to add some space between them. The gap property makes this easy.

For example:

div { 
    display: flex;
    gap: 10px;
}

The gap: 10px declaration adds a 10-pixel space between the flex items. Unlike adding margins to individual items, gap is specifically designed to control the spacing between items in a Flexbox or Grid container. It does not add extra space around the outside of the container.

You can also use other units, such as 1rem, 2em, or percentages.

The gap property is particularly useful when combined with flex-grow. See the next example.

Now, you can be more specific by defining a class for the parent <div> element. For example,

<style>
    div 
      {
        border: solid 1px red;
        padding: 5px;
      }
    .parent { 
        display: flex;
        gap: 10px;
      }
</style>

<body>
    <div class='parent'>
        <div> div 1 </div>
        <div> div 2 </div>
        <div> div 3 </div>
    </div>
</body>

Even though the child elements are placed side-by-side to each other, there’s something not right about the placement. I want to place the elements evenly inside the parent element.

Using "flex-grow" Property

I can use the flex-grow property to place the elements side-by-side but evenly inside the parent.

<style>
    .parent 
      { 
        display: flex;
        gap: 10px;
      }
    div 
      {
        border: solid 1px red;
        padding: 5px;
        flex-grow: 1;
      }
</style>
</head>

<body>
  <div class='parent'>
    <div> div 1 </div>
    <div> div 2 </div>
    <div> div 3 </div>
    <div> div 4 </div>
  </div>
</body>

Try it

See the <style> section again. The DIV has the flex-grow property with a value 1. The elements are now placed (side by side) evenly covering the entire width of the parent element.

You can change the flex-grow property value of a particular (or a more) <div> element to grow according to your choice and requirement. For example, I want the second <div> (inside the parent) to occupy a little more space than the other DIV elements. Here’s how I’ll do this.

<style>
  div 
    {
      border: solid 1px red;
      padding: 5px;
      flex-grow: 1;
    }
  .parent 
    { 
      display: flex;
      gap: 10px;
    }

  div > :nth-child(2) 
    { 
       flex-grow: 2; 
       color: red; 
    }
</style>
</head>

<body>
  <div class='parent'
    <div> div 1 </div>
    <div> div 2 </div>
    <div> div 3 </div>
    <div> div 4 </div>
  </div>
</body>

Try it

By default, flex items have a flex-grow value of 0, which means they do not grow to fill any extra space. In this example, the first and third items have flex-grow: 1, while the second item has flex-grow: 2. As a result, the second item receives twice as much of the available extra space as each of the other two items. Similarly, you can use values such as 3, 4, and so on to control how the available space is distributed among the flex items.

You can also do this inline. For example,

<style>
  div 
    {
      padding: 5px;
      flex-grow: 1;
    }
  .parent 
    { 
      display: flex;
      gap: 1rem;
    }
</style>
</head>

<body>
  <div class='parent'>
    <div> div 1 </div>
    <!--more space to the 2nd element-->
    <div style='flex-grow: 3;'> div 2 </div>
    <div> div 3 </div>
    <div> div 4 </div>
  </div>
</body>

The objective here is to place the elements (the <div>) side-by-side. However, using the flexible module or the flexbox layout, you can do it more efficiently and has many more options than the traditional methods using float or display: inline-block property.

Using "float" Property

Since, I have mentioned the float property here let's see how you can use this property to place the <div> elements side-by-side.

<style>
    .parent { width: 100%;}
    .parent > div 
      {
        padding: 5px 2px;
        float: left;
        width: 32.1%;
      }
</style>

<body>
  <div class='parent'>
    <div> div 1 </div>
    <div> div 2 </div>
    <div> div 3 </div>
  </div>
</body>

Try it

The "float" value is left. Therefore, all child DIV elements are placed next to each other. However, placing the elements evenly inside the parent is a challenge. Since, the padding or margin can disrupt the placements.

Using "display" property with "inline-block" value

Here’s another method, which you can use to place elements side by side. This is simple. However, it takes some extra effort to place the elements evenly.

<style>
    .parent { width: 100%;}
  
    .parent > div {
      padding: 5px 2px;
      display: inline-block;
      width: 31%;
    }
</style>

<body>
  <div class='parent'>
    <div> div 1 </div>
    <div> div 2 </div>
    <div> div 3 </div>
  </div>
</body>

Try it

Not just the DIV element, you define the flex property to other elements like the <p> element, and more importantly the <span> element, to get a similar result.

← PreviousNext →