Left and Right Alignment using the float Property in CSS

CSSWeb DevelopmentFront End Technology

We can align elements in html using CSS float property which is used for positioning or formatting a box or content. Developer can position element towards left or right with CSS float.

Example

Let’s see an example of CSS float property to align elements −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Alignment using CSS Float</title>
<style>
.screen {
   padding: 10px;
   width: 70%;
   margin: 0 auto;
   background-color: #f06d06;
   text-align: center;
   color: white;
   border-radius: 0 0 50px 50px;
   border: 4px solid #000;
}
.backSeats div{
   margin: 10px;
   padding: 10px;
   color: white;
   border: 4px solid #000;
}
.backSeats div {
   background-color: #4CAF50;
}
.leftFloat{
   float: left;
}
.rightFloat{
   float: right;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="backSeats">
<div class="leftFloat">Premium Left Seat 1</div>
<div class="leftFloat">Premium Left Seat 2</div>
<div class="rightFloat">Premium Right Seat 1</div>
</div>
</div>
</body>
</html>

Output

This will produce the following output −

Example

Let’s see another example of CSS float property to align elements −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title> Alignment using CSS Float</title>
<style type="text/css">
p {
   float: left;
   margin: 10px;
   padding: 10px;
   color:white;
   background-color: #48C9B0;
   border: 4px solid #145A32;
}
p.noneFloat{
   float: none;
   clear: both;
   color: #34495E;
}
</style></head>
<body>
<p>I love Java.</p>
<p class="noneFloat">I think C# is better.</p>
<p>Even C isn't a bad choice.</p>
<p>I agree!</p>
</body>
</html>

Output

This will produce the following output −

raja
Published on 07-Jan-2020 10:54:52
Advertisements