How do I right align div elements?

Question

The body of my html document consists of 3 elements, a button, a form, and a canvas. I want the button and the form to be right aligned and the canvas to stay left aligned. The problem is when I try to align the first two elements, they no longer follow each other and instead are next to each other horizontally?, heres the code I have so far, I want the form to follow directly after the button on the right with no space in between.

#cTask {
  background-color: lightgreen;
}

#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="timeline.js"></script>
  <link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>

<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
    </button>
  </div>
  <div id="addEventForm">
    <form>
      <p><label>Customer name: <input></label></p>
      <p><label>Telephone: <input type=tel></label></p>
      <p><label>E-mail address: <input type=email></label></p>
    </form>
  </div>
  <div>
    <canvas id="myBoard" width="600" height="600" style="background:lightgray;">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>

score 825 · Answer 1 · edited Dec 26 '20 at 19:56

825

Floats are okay, but problematic with IE 6 & 7.
I'd prefer using the following on the inner div:

margin-left: auto; 
margin-right: 0;

See the IE Double Margin Bug for clarification on why.

edited Dec 26 '20 at 19:56

answered Sep 07 '12 at 22:21

pstanton

35,033
24
126
168

3

perfect solution! better than float because it preserves height – iTake Jan 17 '14 at 16:17
3

Shouldn't use px in 0 values. – ShellNinja Mar 13 '14 at 21:12
7

@ShellNinja why? i know `0` is valid, however so is 0px... argue your point so we learn something. – pstanton Mar 17 '14 at 09:25
44

Leaving out the unit allows the browser to skip certain calculations on render this improving performance. If it's zero why waste the resources computing the layout based on a unit? Zero is zero regardless of unit... One would think this logic would be built into browsers by now. [link](http://twoopz.tumblr.com/post/7021586127/css3-improve-performance-with-best-practices) – ShellNinja Mar 18 '14 at 13:27
8

can't disagree but i doubt it impacts performance much. edit. – pstanton Mar 19 '14 at 02:03
29

I can't get this to work, the div still aligns left. Could you provide a fiddle or some (more) lines of html/css? – Gerrit-K Apr 07 '14 at 06:35
39

Make sure your element has `display: block;` – derek_duncan Dec 29 '14 at 16:59
Didn't work for me in IE 8 with `display: block` or `display: inline-block` on a div within a table cell - which I know isn't exactly the OP's question, but is what I believe would be a more common scenario... Had to use `float: right`, and not liking the thought of non-backward-compatibility, unless this way (using margins on the div) just doesn't work in IE 8? Unless I just leave the margin adjustment code in the CSS for earlier IE versions, I guess. – vapcguy Feb 04 '15 at 03:59
Didn't work with an anchor I wanted to right align (on latest Firefox). Even tried adding "display: block" - see https://jsfiddle.net/birbilis/fg0mvb35/ - using float: right worked fine – George Birbilis Nov 30 '17 at 09:34
1

Working examples: https://codepen.io/zurfyx/pen/NyKWjm https://codepen.io/zurfyx/pen/KQPKqP – zurfyx Jan 27 '18 at 11:28
3

This requires the inner element to be a block and to have a fixed width. – Onur Yıldırım Feb 14 '18 at 22:06
1

Can alternatively use ```margin: 0 0 0 auto;``` if you'd like to put all your margin styles in one line. Using ```0``` or ```0px``` are both considered fine, the main thing is to be consistent in your project and stick to one of them. – Jaxon Jun 04 '18 at 00:49
1

great solution! but i disagree: floats are not ok. in many situations they will mess with text layout, even with horrid clearfixes in place. – ZPiDER Nov 29 '19 at 19:55
on chrome 96 `display: block` worked for me, but `display: inline-block` didn't work for me – Isaac Weingarten Jan 07 '22 at 03:58
Just use `margin:0 auto;` It's much better. – Hansana Dasanayaka Feb 11 '23 at 14:35

score 559 · Accepted Answer · edited Aug 05 '15 at 14:26

559

You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;.

edited Aug 05 '15 at 14:26

Mariusz Jamro

30,615
24
120
162

answered Oct 07 '11 at 21:58

vantrung -cuncon

10,207
5
47
62

6

Never thought I'd be using float. I tried `margin-left: auto;` but that didn't work which surprised me because the element I'm trying to align to the right is relative. – DFSFOT Feb 27 '19 at 17:05
6

@DFSFOT The opposite happened to me. Expected float:right to work but margin-left: auto did the trick, thanks. – Carl Kroeger Ihl Oct 01 '20 at 22:23
4

This didn't have an effect in my case, the `style="margin-left: auto;margin-right: 0;" ` did though (credits to @pstanton). – Andreas L. Jan 19 '21 at 17:52
what does "float: right" equals to? – Snowmanzzz Mar 18 '22 at 06:52
1

@AndreasL. 's solution worked like charm – Denver Shenal May 27 '22 at 18:16

score 417 · Answer 3 · answered Aug 27 '17 at 02:14

417

Old answers. An update: use flexbox, pretty much works in all browsers now.

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>

And you can get even fancier, simply:

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>

And fancier:

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>

answered Aug 27 '17 at 02:14

Michael Bushe

4,189
1
9
3

5

it works, but when screen gets small instead of stacking they just get really narrow – jean d'arme Sep 22 '17 at 15:37
7

You need to add a media query to change flex-direction from row to column at the breaking point you define. You will likely want to change or remove your justify-content in this example otherwise things will stretch up and down instead of left and right. – Michael Bushe Oct 22 '17 at 10:21
Works for me, but I also added (in the first example) a float: right, so the paragraph on the right does not mess the lines in the left. – Yogurtu Jan 12 '22 at 04:20
This should be the approved answer. – Emir Sürmen Jun 25 '22 at 11:10

score 55 · Answer 4 · answered Aug 28 '19 at 10:49

55

You can use flexbox with flex-grow to push the last element to the right.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>

answered Aug 28 '19 at 10:49

jzilg

811
9
5

7

I personally feel this is the correct answer for 2020 :P – Mike Kellogg Jan 17 '20 at 02:02

score 38 · Answer 5 · edited Feb 14 '23 at 21:26

Note that while this answer is not wrong, it is very outdated methodology written in 2015

Other answers for this question are not so good since float:right can go outside of a parent div (overflow: hidden for parent sometimes might help) and margin-left: auto, margin-right: 0 for me didn't work in complex nested divs (I didn't investigate why).

I've figured out that for certain elements text-align: right works, assuming this works when the element and parent are both inline or inline-block.

Note: the text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

An example:

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

Here's a JS Fiddle.

This worked for me for aligning 3 images to the right with
tags in between them. — Alex Banman, Mar 30 '21 at 14:18
To be clear: this doesn't right-align the div itself. Each of the two child divs "parent/caption" occupy the full width of the screen, as you can see by setting their background-color. What you've done is align the text within them. — Lucian Wischik, Oct 25 '21 at 16:28

score 30 · Answer 6 · answered Nov 24 '16 at 02:55

30

If you have multiple divs that you want aligned side by side at the right end of the parent div, set text-align: right; on the parent div.

answered Nov 24 '16 at 02:55

Magsafe

3,313
2
12
5

score 22 · Answer 7 · edited Aug 05 '14 at 17:19

22

Do you mean like this? http://jsfiddle.net/6PyrK/1

You can add the attributes of float:right and clear:both; to the form and button

edited Aug 05 '14 at 17:19

Hanna

10,315
11
56
89

answered Oct 07 '11 at 22:00

Joseph Marikle

76,418
17
112
129

score 15 · Answer 8 · answered Nov 18 '20 at 22:23

15

Maybe just:

  margin: auto 0 auto auto;

answered Nov 18 '20 at 22:23

Armer B.

753
2
9
25

@SoniSol Which link? – showdev Nov 19 '20 at 02:46

score 12 · Answer 9 · answered Jan 26 '20 at 07:53

12

Simple answer is here:

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>

answered Jan 26 '20 at 07:53

MeirDayan

620
5
20

score 9 · Answer 10 · answered Jun 09 '22 at 21:49

9

Sometimes float: left leads to design problems, for that cases you can use display flex like this:

.right {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 0;
}

<div>
  <div class="right">Right</div>
</div>

answered Jun 09 '22 at 21:49

rnewed_user

1,386
7
13

anil shrestha · Answer 11 · 2019-06-10T17:51:56.027

4

If you are using bootstrap, then:

<div class="pull-right"></div>

edited Jun 10 '19 at 17:51

answered Jun 10 '19 at 16:48

anil shrestha

2,136
2
12
26

1

I think you meant `
`. – Alex Barker Jun 12 '19 at 21:19
4

anil isn't wrong, class "pull-right" results in "float: right;" (tested with Bootstrap 3.4.1) – Fabian Horlacher May 27 '20 at 16:50

Ali Safari · Answer 12 · 2021-09-23T14:54:18.030

One way could be setting a parent div for those elements that need to be pulled right and do the rest like the way shown in the the example below to have them right-aligned:

.parent-div {
  display: flex;
  float: right;
}


/*Below: child-div styling is not needed for this purpose! this is just for demonstration:*/

.child-div {
  text-align: center;
  background-color: powderblue;
  margin: auto 10px;
  height: 100px;
  width: 50px;
}

<div class="">CANVAS div </div>
<div class="parent-div">
  <div class="child-div">child 1</div>
  <div class="child-div">child 2</div>
  <div class="child-div">...</div>
  <div class="child-div">child n</div>
</div>

Bates550 · Answer 13 · 2016-11-12T01:02:22.503

If you don't have to support IE9 and below you can use flexbox to solve this: codepen

There's also a few bugs with IE10 and 11 (flexbox support), but they are not present in this example

You can vertically align the <button> and the <form> by wrapping them in a container with flex-direction: column. The source order of the elements will be the order in which they're displayed from top to bottom so I reordered them.

You can then horizontally align the form & button container with the canvas by wrapping them in a container with flex-direction: row. Again the source order of the elements will be the order in which they're displayed from left to right so I reordered them.

Also, this would require that you remove all position and float style rules from the code linked in the question.

Here's a trimmed down version of the HTML in the codepen linked above.

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

And here is the relevant CSS

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}

score 2 · Answer 14 · answered Jan 30 '22 at 04:26

2

display: flex;
justify-content: space-between;

hasnt been mentioned. if there are 2 elements (even if one is an empty div) it will place one on the left and one on the right.

<div style="display: flex; justify-content: space-between;">
  <div id="emptyDiv"></div>
  <div>I'm on the right</div>
</div>

answered Jan 30 '22 at 04:26

Jevon

295
2
13

If I am correct. You can also change to justify-content: end; so you won't need the emptyDiv element. – Niels Lucas Mar 21 '22 at 14:59
yes flex end has been stated in another answer, however no answer has mentioned this method. the advantage of this method is that if you want to add any more elements it wont effect the position of the "im on the right" div as long as it is the final child of its parent and also provided there is enough space in the row. – Jevon Mar 23 '22 at 15:23

score 0 · Answer 15 · answered Jan 21 '19 at 20:18

0

You can simply use padding-left:60% (for ex) to align your content to right and simultaneously wrap the content in responsive container (I required navbar in my case) to ensure it works in all examples.

answered Jan 21 '19 at 20:18

Leevansha

11
4

score -2 · Answer 16 · answered Apr 07 '21 at 13:03

-2

You can do it easy by just add this css: (Works in IE11)

<div>
<!-- Subtract with the amount of your element width -->
<span style="margin-left: calc(100vw - 50px)">Right</span>
</div>

answered Apr 07 '21 at 13:03

Nhok V

566
3
11

2

This doesn't work unless you know the exact width of each element you are right-aligning. *Extremely* fragile solution to the point of impracticality. – TylerH Apr 07 '21 at 13:44

score -15 · Answer 17 · edited May 30 '14 at 19:23

-15

I know this is an old post but couldn't you just use <div id=xyz align="right"> for right.

You can just replace right with left, center and justify.

Worked on my site:)

edited May 30 '14 at 19:23

McGarnagle

101,349
31
229
260

answered May 30 '14 at 19:20

Dafydd

43
1

24

Please don't use HTML attributes to format your page. That's what CSS was made for. In fact, the `align` attribute is [now deprecated](http://www.w3.org/TR/html5/obsolete.html#non-conforming-features). – Hanna Aug 05 '14 at 17:11
4

...and hence the reason for a question like this and the need for it to be answered, since old methods no longer work. – vapcguy Feb 04 '15 at 03:52
ohohoh, so much negative)) – Nessi Oct 01 '19 at 04:27
Thank you for this answer! I was wondering why `align="right"` was wrong, and lo and behold, you mentioned it and someone provided a solid counter-answer in the form of a comment :) – Prid Sep 12 '22 at 01:37

How do I right align div elements?

17 Answers17

Linked

Related