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

css

← PrevNext →

Tools you can use

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;
    }
</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.

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;
      }
</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;
      }
    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;
    }

  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

The div elements have default flex-grow value as 1. However, the second is special and therefore it grows bigger, occupies more space, since it has a flex-grow value of 2. Similarly, you can use values like "3", "4" etc.

You can also do this inline. For example,

<style>
  div 
    {
      padding: 5px;
      flex-grow: 1;
    }
  .parent 
    { 
      display: flex;
    }
</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.

Be nice and stay safe. Thanks for reading. ☺

← PreviousNext →