August 6, 2020

Top 5 ways to display two div side by side using CSS

In HTML, there are two types of element inline and block element.Inline elements can place element next to each other but they don’t support height and width property by default and block elements support width and height property by default but we can’t place block elements like two div side by side

So, here we can see How we can make it work

we will see how div can place next to each other in 5 different ways

  • display: inline-block (tradional way)
  • css flexbox method
  • css grid method
  • display: table method
  • float property

Please subscribe for web development tutorials

Using display: inline-block

display: inline-block property helps to place block element beside each other

But, we need to add extra width property to the block element because block element by default takes 100% width

eg.

<!DOCTYPE html>
<head>
</head>
<body>
  <div class="element">
  </div>
  <div class="element">
  </div>
</body>
</html>

// css

.element {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #ce8888;
  
}

and output will be

please check example here

Using flexbox

flexbox is a modern way of designing the layout of webpage and flexbox is not a single property its complete module it has a number of feature

let’s see how we can align divs next to each other using flexbox

//html file

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div class="container">
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
  </body>

</html>

// css file

.container {
  display: flex;
}

.item {
  background: #ce8888;
  flex-basis: 100px;
  height: 100px;
  margin: 5px;
}

//output

display: flex property given to container which makes child element in flex context and aligns divs next to each other

In the above example, You can see we have used flex-basis property which is used to give min-width for the item. To understand flexbox in detail please check this out

please find demo here

Using css grid

CSS grid is another great approach to design web page and it’s complete module which comes with number of feature

Let’s see how we can display divs side by side using css grid

//html

<!DOCTYPE html>
<html>
  <head>
    <title>Grid Example</title>
    <style>
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">
      </div>
      <div class="item">
      </div>
    </div>
  </body>
</html>

//css file

 .container {
        display: grid;
        grid-template-columns: 100px 100px; 
        grid-template-rows: 100px;
        grid-column-gap: 5px;
      }
      
      .item {
      background: #ce8888;
 
       
      }

and output will be

property display: grid turns on the grid layout structure

In CSS file, grid-template-columns property helps to divide the page into number of columns, we have given 100px two times then it will create two columns

It’s very big module, I think you should check it out first in detail then only go for using it.

Find demo here

Using display table

display: table property is an alternative for <table> tag

let’s see how we can achieve dispaying div side by side using display: table property

//html file

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="index.css" />
</head>

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

</html>

//css file

.container {
  display: table;
  width: 20%;
}

.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}

and output will be

please find demo here

you can code above display: table example using html table tag also like below

//html file

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
  <table class="container">
    <tr class="table-row">
     <td class="table-cell">
      
      </td>
      <td class="table-cell">
       
      </td>
    </tr>
  </table>
  </body>

</html>

//css file

.container {
  display: table;
  width: 20%;
}

.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}

and output will be

Using float property

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow

let’s see how we can display div side by side using float

//html file

<!DOCTYPE html>

<head>
</head>

<body>
  <div class="element">
  </div>
  <div class="element">
  </div>
</body>

</html>

//css file

.element {
  float: left;
  width: 100px;
  height: 100px;
  background: #ce8888;
  margin: 5px
  
}

and output will be

Please find demo here

Conclusion:

There are number of ways to align divs next to each other but the question is which one is better

It’s totally depend upon requirement

flexbox and CSS grid are modern ways of doing layout for webpage and it’s a complete module and comes with a number of features.I recommend flexbox or CSS grid if need to layout the whole page

If you have minimal requirement then display: inline-block is perfect option.

If you like it please share, because sharing is caring ?

please follow me on twitter.

Please subscribe for web development tutorials

Leave a Reply

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