Teach with us

CSS right Property

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 −

 Live Demo

<!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 −

 Live Demo

<!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 −

 Live Demo

<!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

Updated on 27-Dec-2019 10:01:14

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements