Open In App

How to Right Align Div Elements in CSS

Last Updated : 15 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Right-aligning div elements are commonly used in designing the layout of the web page. Many times we need to position an element or div on the right side of the container or web page using CSS.

In this guide, we will look at possible ways to right align div elements with CSS. The methods are explained with examples for better understanding.

unaligned-divs

Unaligned Div Elements

Div elements take up the space of all divs, if not aligned properly. As we can see in the image above, unaligned div elements have used complete width of the div.

Let’s see how can we right align these div elements and create some place to left side.

Right Align Div Elements

We can right-align div elements using CSS properties. There are three properties used to align div right in CSS.

1. Using float property to Right align div elements

  • We use the float property to right-shift a div in its parent container.
  • This approach is useful when we want to position an element next to another element (like div or image)

Example: Right align div elements using the float property of CSS. 

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Right aligning div element</title>
    <style>
        #heading {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 20px;
            margin-top: 5px;
        }

        .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 id="heading">GeeksforGeeks</div>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>

Output:

div elements right aligned using float property output

Using float property to right align div element

2. Using text-align Property to Right align div elements

  • We 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.

Example: Align div element right using the text-align property of CSS.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Right aligning div element</title>
    <style>
        #heading {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 20px;
            margin-top: 5px;
        }

        .container {
            width: 500px;
            height: 300px;
            background-color: cyan;
            text-align: right;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: green;
            display: inline-block;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="heading">GeeksforGeeks</div>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>

Output:

div elements right aligned using text-align property output

using text-align property to right align div

3. Using display flex Property to Right align div elements

We use the display flex property to make the div a flexbox and then set the justify-content value to flex-end to set the div elements to the right.

Example: This is another example that describes the aligning of the div element to the right with the help of the display: flex property.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Right aligning div element</title>
    <style>
        #heading {
            font-size: 42px;
            font-weight: bold;
            color: #009900;
            margin-left: 20px;
            margin-top: 5px;
        }

        .container {
            width: 500px;
            height: 300px;
            background-color: cyan;
            display: flex;
            justify-content: flex-end;

        }

        .item {
            width: 100px;
            height: 100px;
            background-color: green;
            display: inline-block;
            margin: 2px;
        }
    </style>
</head>

<body>
    <div id="heading">GeeksforGeeks</div>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>

Output:

div element right aligned using flex property output

using display flex property to right align div element

Conclusion

Right aligning div elements is a very fundamental task in web development. Creating page layouts or styling elements require you to change their alignment.

In this guide, we have covered three ways to right align div elements with CSS. Using these CSS properties will help you easily align div elements to right. Hope this guide help you in your journey of web development.

Master the art of Web Development with Full Stack Web Development Course



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads