CODEWITHSUNDEEP
htmlalignment
Daniel Kivatinos
Daniel Kivatinos

Reputation: 25046

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.

Upvotes: 53

Views: 248950

Answers (7)

Post Impatica
Post Impatica

Reputation: 16433

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>

Upvotes: 0

Marcel Guzman
Marcel Guzman

Reputation: 1672

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

Upvotes: 103

Sachin Kotian
Sachin Kotian

Reputation: 11

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.

Upvotes: 1

JavaDragon
JavaDragon

Reputation: 451

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

padding left:5px; 



padding left :30px

Upvotes: 1

Ronald Mathews
Ronald Mathews

Reputation: 2248

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>

Upvotes: 1

sepehr
sepehr

Reputation: 18495

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.

Upvotes: 35

Calvin
Calvin

Reputation: 4619

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

Upvotes: 8

Related Questions