The right property is used to set the horizontal position of element. It is set as −
right: auto|length|initial|inherit;
Example
Let us see an example to implement the right property in CSS −
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-color: orange;
position: absolute;
right: 90px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>Output
Example
Let us see another example −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
background-color:orange;
width:100px;
position:relative;
right:0px;
color: white;
}
</style>
</head>
<body>
<h1>Details</h1>
<div class="demo">Examination Center near ABC College.</p>
<div class="demo2">Exam begins at 11AM.</p>
</body>
</html>Output
Example
Let us now see an example with a negative value −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
background-color:orange;
width:100px;
position:relative;
right:-100px;
color: white;
}
</style>
</head>
<body>
<h1>Details</h1>
<div class="demo">Examination Center near ABC College.</p>
<div class="demo2">Exam begins at 11AM.</p>
</body>
</html>Output