How do I right align div elements?


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">
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src="timeline.js"></script>
  <link rel="stylesheet" href="master.css" type="text/css" media="screen" />

<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
  <div id="addEventForm">
      <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>
    <canvas id="myBoard" width="1000" height="600">
      <p>Your browser doesn't support canvas.</p>

2/4/2018 9:55:58 PM

Accepted Answer

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

8/5/2015 2:26:30 PM

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>

And you can get even fancier, simply:

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

And fancier:

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


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 style="display: inline-block; text-align: right; width: 100%">
        Caption for parent

Here's a JS Fiddle.


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>

Do you mean like this?

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


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.