Methods to 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.
<!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">w3wiki</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.
<!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">w3wiki</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 Flexbox 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.
<!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">w3wiki</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
How to Right Align Div Elements in CSS
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. Right-aligning div elements can be particularly useful for creating layouts that direct the user’s attention or for attaching to specific design requirements.
In this article will guide you through various methods to right-align div elements using CSS, ensuring you understand each step thoroughly.
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.