Open In App

How to Right Align Div Elements in CSS?

Last Updated : 26 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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

output
How to Right Align Div Elements in CSS?

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

output
How to Right Align Div Elements in CSS?

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

output
How to Right Align Div Elements in CSS?

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

How to Right Align Div Elements in CSS?

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

right-aligned-div
right-aligned-div

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.


Next Article

Similar Reads