How to Right Align Div Elements in CSS?

Last Updated : 26 Apr, 2025

In CSS, to right-align <div> elements, there are multiple methods available that can be used. Each method serves a different purpose, making it easy to choose the best one depending on your needs.

1. Using Float Property

The float property in CSS is used to right-align a <div> by applying float: right;. This moves the element to the right side of its container. While simple to use, it can cause layout issues, especially with overlapping elements.

HTML

<html>
<head>
    <style>
        .container {
            background-color: rgb(231, 231, 210);
            width: 500px;
            height: 250px;
        }

        .item {
            width: 80px;
            height: 80px;
            background-color: green;
            float: right;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

Output

2. Using text-align Property

We can apply text-align property to the parent container and all the child elements inside the container will align to the right of the container. This approach is useful when you want to align a group of elements to the right side of a container or web page.

HTML

<html>
<head>
    <style>
        .container {
            width: 500px;
            height: 300px;
            background-color: rgb(231, 231, 210);
            text-align: right;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: green;
            display: inline-block;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

Output

3. Using Flexbox

Flexbox is a modern and powerful layout tool in CSS, making it easy to align and distribute space within a container. To right-align a <div> using Flexbox, you can set the parent container's display property to flex and use the justify-content: flex-end; property.

HTML

<html>
<head>
    <style>
        .container {
            width: 500px;
            height: 300px;
            background-color: rgb(231, 231, 210);
            display: flex;
            justify-content: flex-end;

        }

        .item {
            width: 100px;
            height: 100px;
            background-color: green;
            display: inline-block;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

Output

4. Using CSS Grids

CSS Grid allows precise control over both rows and columns, making it perfect for right-aligning elements. To align a <div> to the right, set the parent container to display: grid; and use justify-items: end;.

HTML

<html>
<head>
    <style>
        .container {
            width: 500px;
            height: 300px;
            background-color: rgb(231, 231, 210);
            display: grid;
            grid-auto-flow: column; 
            justify-content: end;
            gap: 2px;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

Output

5. Using Position property

The CSS position property allows you to control the exact placement of a <div> within its parent container. To right-align a <div>, you can use position: absolute; combined with right: 0;, which will position the element at the right edge of its nearest positioned ancestor.

HTML

<html>
<head>
    <style>
        .container {
            width: 500px;
            height: 300px;
            background-color: rgb(231, 231, 210);
            position: relative;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            right: 0;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
    </div>
</body>
</html>

Output

Conclusion

These are multiple ways to right-align a <div> in CSS, each with its own advantages depending on the complexity of your layout. For simple cases, float or text-align can work, but for more modern and responsive designs,Flexbox and CSS Grid are recommended. The position property also offers precise control, but it is best suited for specific cases where you need absolute positioning.

How to col align right in Bootstrap 5 ?

dipakxb108

Improve

Article Tags :

How to Right Align Div Elements in CSS?

1. Using Float Property

2. Using text-align Property

3. Using Flexbox

4. Using CSS Grids

5. Using Position property

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?