There are several approaches that you can use to move a div to the right side without using the float property. However, the easiest and most efficient approach is to use CSS flexbox.
In this method, you have to first put the div inside a parent div and then make it a flex container by applying display: flex; on it.
Now, to move the div element to the right side, you have to set the justify-content property to flex-end on the flex container.
If you also want to vertically center the div element, you can simply set the align-items property to center. That’s all.
Here is the HTML code where we have put the div inside a parent div container:
<div class='parent'>
<div class='child'>
This is a right aligned div element.
</div>
</div>
And here is the CSS code to move this div to the right side:
.parent{
display: flex;
border: 1px solid blue;
height: 100px;
justify-content: flex-end; /* Move to the right */
align-items: center; /* Center vertically */
}
.child{
background: yellow;
border: 1px solid red;
}
Here is the image of the right-aligned div:
Method 2: Using Position Property
In this approach also, you have to first put the div element inside a container div. Then set the position of the parent div to relative so that its child div can be positioned relative to this parent.
Next, you need to set the position of the child div to absolute and make use of the right and top properties to set its position on the right side.
Here is the HTML code you need:
<div class='parent'>
<div class='child'>
This is a right aligned div element.
</div>
</div>
And here is the CSS code:
.parent{
position: relative;
border: 1px solid blue;
height: 100px;
}
.child{
position: absolute;
right: 0; /* Set distance from right */
top: 40px; /* Set distance from top */
background: yellow;
border: 1px solid red;
}
It will produce the following result:
Thanks for reading.
