How to align two divs next to each other

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.

2 comments

  1. Janelle

    Tried it out on a blog I’m making and it works.

Comments are closed.