How To Float Two Divs Next to Each Other Right to Left in HTML and CSS

To be clear, this tutorial explains how to float two divs side by side so one is float left, the other is float right. We use this method to create our categories widget. We now also cover how to simply float divs left side by side.

A div is a standard term on the web for a block of space which normally contains a text widget.

If you want to float two divs next to each other right to left, you need to know a bit of CSS and HTML.

Fortunately it’s not much coding.

And when you master this, you can float text, images, ads, videos and more anywhere on your site.

Here’s a real example from the Dear Blogger sidebar here to explain how to accomplish this.

The HTML you need

For starters let’s write out on large div class that will contain two smaller divs. Ok. Give this large div a class.

Now create two smaller divs, and give them class left and class right respectively. The exact class names you use is up to you, just as long as you match them exactly in your CSS. Remember that semantic is always best.

To save you some time I wrote out the proper HTML:

<div class="entire-thing">
<div class="ad-left">
ITEM YOU WANT TO FLOAT LEFT
</div>
<div class="ad-right">
ITEM YOU WANT TO FLOAT RIGHT
</div>
<div class="clear"></div>
</div>

You’ll notice at the end is a clear class which is also an empty div, and this clear class lies within the larger div! You have to write out this empty clear class and place it before the div which closes off the larger div. If you don’t…things break.

There are a few ways to write this clear class but this seems to be the most accepted among developers at the moment.

The CSS you need

Now here is the simple CSS.

All I’ve done is set the left div to float left and the right div to float right, with a little margin.

I didn’t even need to set a width on the large div from our HTML – the sidebar of this blog accomplishes that just fine.

.ad-left {
  float: left;
}

.ad-right {
  float: right;
  margin-left: 10px;
}

.entire-thing {
  width: 650px;
}

Just make sure to write things out precisely, simple mistakes in CSS can send you down the worst of rabbit holes and waste lots of your time.

Additionally, pay attention to the assigned widths and heights of the items you place inside the divs – you don’t want things overlapping or falling out of your divs.

You can adjust the width of “entire-thing” and also set different characteristics on the “ad-left” and “ad-right” in order to make them centered, wider, taller etc!

And please drop a note in the comments below if this tutorial worked for you, or if you have any questions.