How do I right align div elements?

Css Problem Overview

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>

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

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

Solution 3 - Css

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>

Solution 4 - Css

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>

Solution 5 - Css

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.

Solution 6 - Css

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.

Solution 7 - Css

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

Solution 8 - Css

Maybe just:

  margin: auto 0 auto auto;

Solution 9 - Css

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>

Solution 10 - Css

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>

Solution 11 - Css

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

Solution 12 - Css

If you are using bootstrap, then:

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

Solution 13 - Css

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>

Solution 14 - Css

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.

Solution 15 - Css

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>

Solution 16 - Css

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:)

Content Type	Original Author	Original Content on Stackoverflow
Question	MEURSAULT	View Question on Stackoverflow
Solution 1 - Css	pstanton	View Answer on Stackoverflow
Solution 2 - Css	vantrung -cuncon	View Answer on Stackoverflow
Solution 3 - Css	Michael Bushe	View Answer on Stackoverflow
Solution 4 - Css	jzilg	View Answer on Stackoverflow
Solution 5 - Css	Mladen Adamovic	View Answer on Stackoverflow
Solution 6 - Css	Magsafe	View Answer on Stackoverflow
Solution 7 - Css	Joseph Marikle	View Answer on Stackoverflow
Solution 8 - Css	Armer B.	View Answer on Stackoverflow
Solution 9 - Css	MeirDayan	View Answer on Stackoverflow
Solution 10 - Css	Ali Safari	View Answer on Stackoverflow
Solution 11 - Css	Bates550	View Answer on Stackoverflow
Solution 12 - Css	anil shrestha	View Answer on Stackoverflow
Solution 13 - Css	Jevon	View Answer on Stackoverflow
Solution 14 - Css	Leevansha	View Answer on Stackoverflow
Solution 15 - Css	Nhok V	View Answer on Stackoverflow
Solution 16 - Css	Dafydd	View Answer on Stackoverflow