How to align two divs next to each other

Last updated on April 26th, 2022 at 01:31 pm

It took me a long time to figure this one out myself, and I’ve also been too lazy and kept using tables to align my content next to each other! It’s finally time to ditch those tables and replace existing ones with this easy CSS code that aligns two divs next to eachother.

HTML Code:

<div class=”divLeftContainer”>
<div class=”divLeft”> Here is the content from the first div container.</div>
<div class=”divLeft”> Here is the content from the second div container.</div>
</div>

CSS Code:

.divLeftContainer {
display: inline-block;
width: 100%;
height: 100%;
}

.divLeft{
width: 45%;
margin: 2%;
float: left;
}

Result:

Here is the content from the first div container.

Here is the content from the second div container.