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    x000D   x000D   cTask   x000D    background-color  lightgreen  x000D    x000D   x000D   button   x000D    position  relative  x000D    float  right  x000D    x000D   x000D   addEventForm   x000D    position  relative  x000D    float  right  x000D    border  2px solid  003B62  x000D    font-family  verdana  x000D    background-color   B5CFE0  x000D    padding-left  10px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery js  gt  lt  script gt  x000D     lt script type  text javascript  src  timeline js  gt  lt  script gt  x000D     lt link rel  stylesheet  href  master css  type  text css  media  screen    gt  x000D   lt  head gt  x000D   x000D   lt body bgcolor  000  TEXT  FFFFFF  gt  x000D     lt div id  button  gt  x000D       lt button onclick  showForm    type  button  id  cTask  gt  x000D          Create Task x000D       lt  button gt  x000D     lt  div gt  x000D     lt div id  addEventForm  gt  x000D       lt form gt  x000D         lt p gt  lt label gt Customer name   lt input gt  lt  label gt  lt  p gt  x000D         lt p gt  lt label gt Telephone   lt input type tel gt  lt  label gt  lt  p gt  x000D         lt p gt  lt label gt E-mail address   lt input type email gt  lt  label gt  lt  p gt  x000D       lt  form gt  x000D     lt  div gt  x000D     lt div gt  x000D       lt canvas id  myBoard  width  1000  height  600  gt  x000D         lt p gt Your browser doesn t support canvas  lt  p gt  x000D       lt  canvas gt  x000D     lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can use flexbox with flex-grow to push the last element to the right    lt div style  display  flex   gt     lt div style  flex-grow  1   gt Left lt  div gt     lt div gt Right lt  div gt   lt  div gt

User · Answer

I know this is an old post but couldn t you just use  lt div id xyz align  right  gt  for right   You can just replace right with left  center and justify   Worked on my site

User · Answer

Simple answer is here    lt div style  text-align  right   gt      anything       lt select id  locality-dropdown  name  locality  class  cls  style  width  200px  height  28px  overflow auto   gt       lt  select gt   lt  div gt

User · Answer

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

User · Answer

Old answers   An update  use flexbox  pretty much works in all browsers now    x000D   x000D   lt div style  display  flex  justify-content  flex-end  gt  x000D     lt div gt I m on the right lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    And you can get even fancier  simply    x000D   x000D   lt div style  display  flex  justify-content  space-around  gt  x000D     lt div gt Left lt  div gt  x000D     lt div gt Right lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    And fancier    x000D   x000D   lt div style  display  flex  justify-content  space-around  gt  x000D      lt div gt Left lt  div gt  x000D      lt div gt Middle lt  div gt  x000D     lt div gt Right lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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  lt button gt  and the  lt form gt  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  amp  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    lt div id  mainContainer  gt     lt div gt       lt canvas gt  lt  canvas gt     lt  div gt     lt div id  formContainer  gt       lt div id  addEventForm  gt          lt form gt  lt  form gt       lt  div gt       lt div id  button  gt         lt button gt  lt  button gt       lt  div gt     lt  div gt   lt  div gt    And here is the relevant CSS   mainContainer     display  flex    flex-direction  row       formContainer     display  flex    flex-direction  column

User · Answer

Maybe just    margin  auto 0 auto auto

User · Answer

If you are using bootstrap  then    lt div class  pull-right  gt  lt  div gt

User · Answer

Floats are okay  but problematic with IE 6  amp  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

User · Answer

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    lt div style  display  block  width  80   min-width  400px  background-color   caa   gt       lt div style  display  block  width  100   gt          I m parent      lt  div gt       lt div style  display  inline-block  text-align  right  width  100   gt          Caption for parent      lt  div gt   lt  div gt    Here s a JS Fiddle

User · Answer

You can make a div that contains both the form  amp  the button  then make the div float to the right by setting float  right

User · Answer

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

User · Answer

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

[css] How do I right align div elements?

Examples related to css

Examples related to html