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

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

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="sovrn-ads">
<div class="ad-left">
<script type="text/javascript" src="http://ap.lijit.com/www/delivery/fpi.js?z=275062&u=gregnarayan&width=160&height=600"></script>
</div>
<div class="ad-right">
SOME MORE AD CODE OR WHATEVER YOU WANT

</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;
}

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.

Conclusion

Please drop a note in the comments if this worked for you, or if you have any questions.


Share This Post

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

Post Comment