How to Align Two Div Tags Side by Side

 

Hi to all, in this article I am going to tell you all about how to align two div tags side by side easily in 5 different methods.

Here I will tell you all about top 5 methods to align two div tags side by side.

So read the below provided steps carefully and completely to get clear understanding about aligning two div tags side by side easily without any issue or error.

Methods to Align Side by Side

---

Flex Box

Flexbox is a latest way of designing the format of the website and flex box is not always a single property it is an total module it has a number of features.

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

<style>
.container {display: flex;}
.item {background: #ce8888; flex-basis: 100px; height: 100px; margin: 5px;}
</style>

Display- inline-block

Basically this property uses to locate the block elements beside each of the different and we need to feature extra width belongings to the block element due to the block detail via default takes one hundred percent width.

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

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

CSS Grid

CSS grid is some other method to design a web page and its entire module which comes with a number of features Permits see how we are able to display the div aspect through side the usage of CSS grid.

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

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

Float property

The CSS locations and detail on the left or proper side of it box, allowing text content and inline elements to wrap around it and the element is removed from the every day go with the flow of the page.

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

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

Display table

This property is an alternative for the <table> tag and it Permits how we can acquire showing div tags side for the usage of display:table assets.

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

<style>
.container {display: table; width: 20%;}
.table-row { display: table-row; height: 100px;}
.table-cell {border: 1px solid; background: #ce8888; display: table-cell; padding: 2px;}
</style>

You can change the CSS style as per your requirements

Conclusion

---

I hope that you all have understood about how to align two div tags side by side easily.

And you can use any one of the above provided methods to to align div tags in your website.