How to Align Div Elements Side by Side in HTML and CSS?

Align

elements side by side

Many ways to do it, beware float: left…

There are many ways to align elements side-by-side. Below are the most common ways to achieve two elements side-by-side…

Demo: View/edit all the below examples on Codepen

---

Basic styles for all examples below…

Some basic css styles for parent and child elements in these examples:

.parent {<br>  background: mediumpurple;<br>  padding: 1rem;<br>}<br>.child {<br>  border: 1px solid indigo;<br>  padding: 1rem;<br>}<br>

---

Use float: left with caution

Using the float solution may have unintended effects on other elements. (Hint: You may need to use a clearfix.)

html

<div>  <div class="child float-left-child">A</div>
<br>  <div></div>
<br><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false">  float: left;<br>}<br>

---

Using display: inline-block is straightforward

html

<div>  <div class="child inline-block-child">A</div>
<br>  <div></div>
<br><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false">  display: inline-block;<br>}<br>

---

display: inline-block and removing the space between divs

Note: the space between these two child elements can be removed, by removing the space between the div tags:

html

<div>  <div class="child inline-block-child">A</div>
<div class="child inline-block-child">B</div>
<br>
</div><br>

css

  display: inline-block;<br>}<br>

---

display: flex is a good choice

html

<div>  <div class="child flex-child">A</div>
<br>  <div></div>
<br><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false">  display: flex;<br>}<br>.flex-child {<br>  flex: 1;<br>}<br>

---

display: inline-flex is similar to display: flex but inline

html

<div>  <div class="child">A</div>
<br>  <div></div>
<br><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false">  display: inline-flex;<br>}<br>

---

With display: grid, you can fine tune the layout

html

<div>  <div class="child">A</div>
<br>  <div></div>
<br><p></p>
<p>css</p>
<p></p>
<pre class="brush:php;toolbar:false">  display: grid;<br>  grid-template-columns: 1fr 1fr<br>}<br>

---