CSS right Property

CSSWeb DevelopmentFront End Technology

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

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

Advertisements