How do I right align div elements?

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.

---

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

---

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

And you can get even fancier, simply:

And fancier:

---

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>

---

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.

---

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.

---

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

---

Maybe just:

  margin: auto 0 auto auto;

---

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>

---

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

---

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

---

If you are using bootstrap, then:

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

---

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.

---

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

---

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.

---

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

---

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

---