How to Right Align Div Elements in CSS
Last Updated :
15 Mar, 2024
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 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:
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:
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:
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
Share your thoughts in the comments
Please Login to comment...