What is the best way to left align and right align two div tags?

HtmlAlignment

Html Problem Overview

What is the best way to right align and left align two div tags on a web page horizontally next to each other? I would like an elegant solution to do this if possible.

Html Solutions

Solution 1 - Html

<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>

Solution 2 - Html

As an alternative way to floating:

<style>
    .wrapper{position:relative;}
    .right,.left{width:50%; position:absolute;}
    .right{right:0;}
    .left{left:0;}
</style>
...
<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div>

Considering that there's no necessity to position the .left div as absolute (depending on your direction, this could be the .right one) due to that would be in the desired position in natural flow of html code.

Solution 3 - Html

<style>
#div1, #div2 {
   float: left; /* or right */
}
</style>

Solution 4 - Html

You can do it with few lines of CSS code. You can align all div's which you want to appear next to each other to right.

<div class="div_r">First Element</div>
<div class="div_r">Second Element</div>

<style>
.div_r{
float:right;
color:red;
}
</style>

Solution 5 - Html

use padding tags the above float tags didnt worked out, I used

padding left:5px; 



padding left :30px

Solution 6 - Html

I used the below. The genre element will start where the DJ element ends,

<div>
<div style="width:50%; float:left">DJ</div>
<div>genre</div>
</div>

pardon the inline css.

Solution 7 - Html

This solution has left aligned text and button on the far right.

If anyone is looking for a material design answer:

<div layout="column" layout-align="start start">
 <div layout="row" style="width:100%">
    <div flex="grow">Left Aligned text</div>
    <md-button aria-label="help" ng-click="showHelpDialog()">
      <md-icon md-svg-icon="help"></md-icon>
    </md-button>
 </div>
</div>
Categories
Recommended Html Solutions
Recommended Alignment Solutions

Previous Solution:

How to convert NSData to byte array in iPhone?

IphoneObjective CBytearrayType Conversion

Next Solution:

Linq OrderBy against specific values

C#LinqLinq to-Objects

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDaniel KivatinosView Question on Stackoverflow
Solution 1 - HtmlMarcel GuzmanView Answer on Stackoverflow
Solution 2 - HtmlsepehrView Answer on Stackoverflow
Solution 3 - HtmlCalvinView Answer on Stackoverflow
Solution 4 - HtmlRonald P MathewsView Answer on Stackoverflow
Solution 5 - HtmlJavaDragonView Answer on Stackoverflow
Solution 6 - HtmlSachin KotianView Answer on Stackoverflow
Solution 7 - HtmlPost ImpaticaView Answer on Stackoverflow