Top 5 ways to display two div side by side using CSS
Tags: css, html
Published: 2020-04-29 11:03:49

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> So, here we can see How we can make it work</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we will see how div can place next to each other in 5 different ways</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>display: inline-block (tradional way)</li><li>css flexbox method</li><li>css grid method</li><li>display: table method</li><li>float property</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Using display: inline-block</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>display: inline-block</strong> property helps to place block element beside each other </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But, we need to add extra width property to the block element because block element by default takes 100% width</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>eg.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;!DOCTYPE html>
&lt;head>
&lt;/head>
&lt;body>
  &lt;div class="element">
  &lt;/div>
  &lt;div class="element">
  &lt;/div>
&lt;/body>
&lt;/html></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>// css </p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.element {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #ce8888;
  
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>and output will be</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":457,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/image-4.png" alt="" class="wp-image-457"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>please check example <a href="https://codepen.io/nitinhepat/pen/yLYMroe" target="_blank" rel="noreferrer noopener">here</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Using flexbox</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://techboxweb.com/detail-beginner-guide-for-css-flexbox-with-examples/"><strong>flexbox </strong></a>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</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>let's see how we can align divs next to each other using flexbox</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//html file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;!DOCTYPE html>

&lt;head>
    &lt;link rel="stylesheet" href="index.css" />
&lt;/head>

&lt;body>
  &lt;div class="container">
    &lt;div class="item">
    &lt;/div>
    &lt;div class="item">
    &lt;/div>
  &lt;/div>
  &lt;/body>

&lt;/html></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>// css file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.container {
  display: flex;
}

.item {
  background: #ce8888;
  flex-basis: 100px;
  height: 100px;
  margin: 5px;
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>//output </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":458,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/image-5.png" alt="" class="wp-image-458"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>display: flex</strong> property given to container which makes child element in flex context and aligns divs next to each other</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <a rel="noreferrer noopener" href="https://techboxweb.com/detail-beginner-guide-for-css-flexbox-with-examples/" target="_blank">check this out</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>please find demo <a rel="noreferrer noopener" href="https://codepen.io/nitinhepat/pen/qBOrwwK" target="_blank">here</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Using css grid</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noreferrer noopener"><strong>CSS grid</strong></a> is another great approach to design web page and it's complete module which comes with number of feature</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's see how we can display divs side by side using css grid</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//html</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;!DOCTYPE html>
&lt;html>
  &lt;head>
    &lt;title>Grid Example&lt;/title>
    &lt;style>
    &lt;/style>
  &lt;/head>
  &lt;body>
    &lt;div class="container">
      &lt;div class="item">
      &lt;/div>
      &lt;div class="item">
      &lt;/div>
    &lt;/div>
  &lt;/body>
&lt;/html></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>//css file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code> .container {
        display: grid;
        grid-template-columns: 100px 100px; 
        grid-template-rows: 100px;
        grid-column-gap: 5px;
      }
      
      .item {
      background: #ce8888;
 
       
      }</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>and output will be</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":470,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/image-9.png" alt="" class="wp-image-470"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>property <strong>display: grid</strong> turns on the grid layout structure</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In CSS file, <strong>grid-template-columns property helps to divide the </strong>page into number of columns, we have given 100px two times then it will create two columns</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It's very big module, I think you should <a rel="noreferrer noopener" href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank">check it out</a> first in detail then only go for using it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Find demo <a href="https://codepen.io/nitinhepat/pen/YzyVMxY" target="_blank" rel="noreferrer noopener">here</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Using display table</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>display: table property is an alternative for &lt;table&gt; tag</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>let's see how we can achieve dispaying div side by side using <strong>display: table</strong> property</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//html file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;!DOCTYPE html>

&lt;head>
    &lt;link rel="stylesheet" href="index.css" />
&lt;/head>

&lt;body>
  &lt;div class="container">
    &lt;div class="table-row">
     &lt;div class="table-cell">
      
      &lt;/div>
      &lt;div class="table-cell">
       
      &lt;/div>
    &lt;/div>
  &lt;/div>
  &lt;/body>

&lt;/html></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>//css file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.container {
  display: table;
  width: 20%;
}

.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>and output will be</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":460,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/image-6.png" alt="" class="wp-image-460"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>please find demo <a rel="noreferrer noopener" href="https://codepen.io/nitinhepat/pen/JjYNbGB" target="_blank">here</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>you can code above display: table example using html <strong>table </strong>tag also like below</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//html file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;!DOCTYPE html>

&lt;head>
    &lt;link rel="stylesheet" href="index.css" />
&lt;/head>

&lt;body>
  &lt;table class="container">
    &lt;tr class="table-row">
     &lt;td class="table-cell">
      
      &lt;/td>
      &lt;td class="table-cell">
       
      &lt;/td>
    &lt;/tr>
  &lt;/table>
  &lt;/body>

&lt;/html></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>//css file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.container {
  display: table;
  width: 20%;
}

.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>and output will be</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":463,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/image-8.png" alt="" class="wp-image-463"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Using float property</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The&nbsp;<a rel="noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" target="_blank"><strong><code>float</code></strong>&nbsp;</a>CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.&nbsp;The element is removed from the normal flow of the page, though still remaining a part of the flow</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>let's see how we can display div side by side using float</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//html file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;!DOCTYPE html>

&lt;head>
&lt;/head>

&lt;body>
  &lt;div class="element">
  &lt;/div>
  &lt;div class="element">
  &lt;/div>
&lt;/body>

&lt;/html></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>//css file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.element {
  float: left;
  width: 100px;
  height: 100px;
  background: #ce8888;
  margin: 5px
  
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>and output will be</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":461,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/04/image-7.png" alt="" class="wp-image-461"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Please find demo <a href="https://codepen.io/nitinhepat/pen/ZEbKaRZ" target="_blank" rel="noreferrer noopener">here</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion:</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>There are number of ways to align divs next to each other but the question is which one is better</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It's totally depend upon requirement</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you have minimal requirement then display: inline-block is perfect option.</p>
<!-- /wp:paragraph -->