Place a button right aligned

html

responsive-design

css

best-practices

byAnton Shumikhin·Nov 10, 2024

Need a quick solution? Use CSS flexbox for an adaptable and powerful right alignment:

<div style="display: flex; justify-content: flex-end;">
  <button>Click Me</button>
</div>

Or float: right;, a classic technique but with limited flexibility:

<button style="float: right;">Click Me</button>

Take a deeper dive into button alignment

Understanding and effectively applying alignment techniques is an important aspect of designing your page layout. Hence, let's dissect this.

Classic `float: right;`

float: right; works well for simple cases when you need to push a button to the far right within a block container. But, be aware that floats remove elements from the normal document flow, causing alignment headaches around surrounding elements and the parent's height. Clear those floats either by overflow: hidden; on the parent block or adding a clearing element with <div style="clear: both;"></div>.

/* The classic, like grandpa's old hat */
button {
  float: right; 
  /* Booya! Floats like a butterfly, stings like when you forget clear */
}

Modern `flexbox`

Flexbox is like the younger hip cousin of float. It provides a robust, flexible, and easy-to-manage layout system. It also requires less conditional fixing for varying amounts of content. Right aligning a button is a snap with justify-content: flex-end;. It shines especially when you have multiple elements to align.

/* Kanye West of CSS – modern and always in Flex */
.container {
  display: flex; 
  justify-content: flex-end; 
  /* Kanye always wants to be at the end.. of arguments */
}

When `text-align` comes into picture

You can also try using text-align: right; on the parent block that encases the button. However, remember to display the button as an inline-block:

/* When you're feeling Shakespeare and the world's a stage */
.container {
  text-align: right;
}
.button {
  display: inline-block;
  /* Now you see me, now you don't */
}

Absolute positioning: the omnipotent

Another powerful technique opts for absolute positioning with right: 0;. It's useful especially when you want to overlay a button above an image or within a more complex layout. Don't forget to set position: relative; on the parent so the button positions itself relative to the parent.

/* Now you're playing with power- Absolute power! */
button {
  position: absolute; 
  right: 0; 
  /* Like the last minute on New Year's Eve */
}

Last minute tips and tricks

Responsiveness

Always bear in mind the responsiveness when aligning things. A layout that looks good on a desktop might look crammed on a mobile. Flexbox got your back here, as it's inherently designed to aid in the creation of responsive UIs.