Solution 1 :

Margin parameter work like this :

margin : top, right, bottom, and left,

So it should be: 0 auto 0 0

by the way flex is also a very nice position :

    display: flex;
    justify-content: flex-end;
    width: 50px;
    background-color:  blue;
<div class="one">
     <div class="element-right">BOX</div>


Solution 2 :

You can achieve that as well with a little help from a wrapper over your original div:


<div class="right-wrapper">
   <div class="right">



.right-wrapper {
   text-align: right;
.right {
   display: inline-block;

This works because the contents of the parent .right-wrapper are set to behave like text while keeping their block behavior (display: inline-block). This causes the child div to react to parent’s text-align: right.

In some cases you might find that the child div is inheriting a width property and is full width. It’s useful to then set child’s width property to auto in case the child element is supposed to be some sort of a button or other, smaller element aligned to the right side.

.right {
   display: inline-block;
   width: auto;

Solution 3 :

You can use margin-left: 100%. If you want to define other margin values, you can use the shorthand margin: 0 0 0 100%, for example. This will “push” the div to the right of the container.

Solution 4 :

You could always use the text-align method on divs

 text-align: right
 display: inline-block

Solution 5 :

.parent {
  width: 100%;
  height: 40px;
  background: #000;
  display: flex;
  justify-content: flex-end;

.parent .child {
  width: 100px;
  height: 100%;
  background: blue;
<div class="parent">
  <div class="child"></div>

Problem :

is there a way to do margin-right auto (always move div to right). I tried margin-right: auto; and margin: 0 0 0 auto; didn’t work.


Comment posted by randomvincent

float:right; is not what I want. I just want margin or padding so that the div will always start on the right end side

Comment posted by Temani Afif

you need margin-left auto if you want the element on the right