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

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.

7 Answers

<div>Left Div</div> <div>Right Div</div> 

As an alternative way to floating:

<style> .wrapper{position:relative;} .right,.left{width:50%; position:absolute;} .right{right:0;} .left{left:0;} </style> ... <div> <div></div> <div></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.

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

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>First Element</div> <div>Second Element</div> <style> .div_r{ float:right; color:red; } </style> 

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

padding left:5px; padding left :30px 

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

<div> <div>DJ</div> <div>genre</div> </div> 

pardon the inline css.

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"> <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>