How To Setup Revel Blogger Template [Way2Themes]

Dear blog reader, today we will be talking about "How to align two div side by side". In HTML, there are styles of elements inline and block detail. Inline factors can place elements subsequent to every difference however they don’t aid peak and width property by using default and block factors aid width and height property through default but we will region block factors like two div side by using facet.

So, here we can see how we are able to make it work. We will see how div can vicinity subsequent to every other in 5 unique approaches.

Top 5 Method to Align Two div Side by Side

•     display: inline-block (traditional way)
•     CSS flexbox method
•     CSS grid method
•     display: table method
•     float property

1. Using display: inline-block

This property helps to locate block elements beside each different. But, we need to feature extra width belongings to the block element due to the fact block detail via default takes one hundred percent width.

HTML-CSS

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

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

Preview

Tips: You can change the CSS (style) as per your requirements.

2. Using flexbox

Flexbox is a current way of designing the format of a website and flexbox isn't always a single property it's an entire module it has a number of features

Let’s see how we are able to align divs subsequent to each other using flexbox.

HTML-CSS

<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>

Preview

Tips: You can change the CSS (style) as per your requirements.

3. Using CSS grid

CSS grid is some other incredible method to design a web web page and its entire module which comes with a number of features

Permit’s see how we are able to display divs aspect through side the usage of CSS grid

HTML-CSS

<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>

Preview

Tips: You can change the CSS (style) as per your requirements.

4. Using display table

This property is an alternative for <table> tag

Permit’s see how we can acquire showing div side via facet 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>

Preview

Tips: You can change the CSS (style) as per your requirements.

5. Using float property

The glide CSS belongings locations and detail on the left or proper side of its box, allowing textual content and inline elements to wrap around it. the element is removed from the everyday go with the flow of the page, even though nonetheless final a part of the flow

Let’s see how we are able to show div aspect by facet using go with the flow.

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

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

Preview

Tips: You can change the CSS (style) as per your requirements.

Conclusion

There are some ways to align divs next to every other but the query is which one is better. It absolutely relies upon upon the requirement

Flexbox and CSS grid are contemporary ways of doing layout for the website and it’s a complete module and springs with a number of functions. I advocate flexbox or CSS grid if want to format the entire web page. When you have minimal necessities then disply: inline-block is the appropriate choice.

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

Related Posts