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