How Can I Align DIV Elements Side by Side Using HTML and CSS?

Align

elements side by side

In the quest to align elements side by side with HTML and CSS, the most notorious approach is float: left, but it's not the only method.

Here are various techniques to achieve side-by-side alignment, ranging from the widely-used to the more innovative.

---

Float

Using float: left or right is one method. However, be cautious as it can impact the layout of other elements.

HTML

<div>
<br>  <div>  <div class="float-left">B</div>
<br>
</div>
<br><br>CSS<br><pre class="brush:php;toolbar:false">.float-left {<br>  float: left;<br>}<br>

---

Inline display

display: inline-block allows for elements to be placed side by side without affecting the layout, although a space may appear between them.

HTML

<div>
<br>  <div>  <div class="inline-block">B</div>
<br>
</div>
<br><br>CSS<br><pre class="brush:php;toolbar:false">.inline-block {<br>  display: inline-block;<br>}<br>

To eliminate the space between inline-block elements, remove the space between the HTML tags.

---

Flexbox

Flexbox, with its powerful layout capabilities, can easily align elements horizontally.

HTML

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

---

Inline Flexbox

Inline flexbox is useful for placing elements side by side within inline content.

HTML

<div>  <div>A</div>
<br>  <div>B</div>
<br>
</div><br>

CSS

.inline-flex-parent {<br>  display: inline-flex;<br>}<br>

---

CSS Grid

CSS Grid offers precise control over element positioning.

HTML

<div>  <div>A</div>
<br>  <div>B</div>
<br>
</div><br>

CSS

.grid-parent {<br>  display: grid;<br>  grid-template-columns: 1fr 1fr;<br>}<br>