Stick button to right side of div

Question

http   jsfiddle net kn5sH   What do I need to add in order to stick the button to the right side of the div on the same line as the header   HTML    lt div gt       lt h1 gt  Ok  lt  h1 gt       lt button type  button  gt Button lt  button gt   lt  div gt    CSS   div       background  purple     div h1       text-align  center     div button       More specifically    The right side of the button should be x pixels away from the right edge of the div  It should be on the same line as the header  Should be contained in the div  stuff like float or relative positioning pops it out of the div visually    What CSS techniques can be used to do this   Thanks

User · Answer

Normally I would recommend floating but from your 3 requirements I would suggest this   position  absolute  right  10px  top  5px    Don t forget position  relative  on the parent div  DEMO

User · Answer

Use position property   style  position  absolute right 0 top 0

User · Answer

div    display  flex   flex-direction  row-reverse

User · Answer

change the CSS as follows   div button   position absolute      right 10px      top 25px

User · Answer

It depends on what exactly you want to achieve   If you just want to have it on the right  then I d recommend against using position absolute  because it opens a whole can of worms down the line   The HTML can also be unchanged   HTML   lt div gt       lt h1 gt  Ok  lt  h1 gt       lt button type  button  gt Button lt  button gt   lt  div gt    the CSS then should be something along the lines of   CSS  div       background  purple      overflow  hidden     div h1       text-align  center      display  inline-block      width  100       margin-right  -50      div button       float  right      You can see it in action here  http   jsfiddle net azhH5   If you can change the HTML  then it gets a bit simpler   HTML   lt div gt       lt button type  button  gt Button lt  button gt       lt h1 gt  Ok  lt  h1 gt   lt  div gt    CSS  div       background  purple      overflow  hidden     div h1       text-align  center     div button       float  right      margin-left  -50       You can see it in action  http   jsfiddle net 8WA3k 1   If you want to have the button on the same line as the Text  you can achieve it by doing this   HTML   lt div gt       lt button type  button  gt Button lt  button gt       lt h1 gt  Ok  lt  h1 gt   lt  div gt    CSS  div       background  purple      overflow  hidden     div h1       text-align  center     div button       float  right      margin-left  -50       margin-top  2em      You an see that in action here  http   jsfiddle net EtqVh 1   Cleary in the lest example you d have to adjust the margin-top for the specified font-size of the  lt h1 gt   EDIT   As you can see  it doesn t get popped out of the  lt div gt    it s till inside  this is achieved by two things  the negative margin on the  lt button gt   and the overflow  hidden  on the  lt div gt   EDIT 2   I just saw that you also want it to be a bit away from the margin on the right  That s easily achievable with this method  Just add margin-right  1em  to the  lt button gt   like this   div       background  purple      overflow  hidden     div h1       text-align  center     div button       float  right      margin-left  -50       margin-top  2em      margin-right  1em      You can see it in action here  http   jsfiddle net QkvGb

User · Answer

lt div gt       lt h1 gt  Ok  lt  h1 gt       lt button type  button  gt Button lt  button gt       lt div style  clear both   gt  lt  div gt   lt  div gt    css  div       background  purple     div h1       text-align  center     div button       float  right      margin-right 10px

User · Answer

Another solution  change margins  Depending on the siblings of the button  display should be modified   button       display       block      margin-left   auto      margin-right  0

[html] Stick button to right side of div

Examples related to html

Examples related to css