Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Left and Right Alignment using the float Property in CSS
The CSS float property is used to position elements horizontally within their container. It allows elements to "float" to the left or right side, making other content wrap around them. This property is commonly used for creating layouts and aligning content.
Syntax
selector {
float: value;
}
Possible Values
| Value | Description |
|---|---|
| left | Element floats to the left side of its container |
| right | Element floats to the right side of its container |
| none | Element does not float (default value) |
Example: Float Left and Right
The following example demonstrates floating elements to both left and right sides −
<!DOCTYPE html>
<html>
<head>
<title>Float Left and Right</title>
<style>
.container {
width: 80%;
margin: 20px auto;
background-color: #f0f0f0;
padding: 10px;
border: 2px solid #ccc;
}
.left-box {
float: left;
width: 200px;
padding: 15px;
margin: 10px;
background-color: #4CAF50;
color: white;
text-align: center;
}
.right-box {
float: right;
width: 200px;
padding: 15px;
margin: 10px;
background-color: #2196F3;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="left-box">Float Left</div>
<div class="right-box">Float Right</div>
<p>This text wraps around the floated elements. It flows naturally around the boxes that are positioned using the float property.</p>
</div>
</body>
</html>
A container with a green box floating left, a blue box floating right, and text content wrapping around both floated elements appears on the page.
Example: Float with Clear Property
When using float, you often need the clear property to control the wrapping behavior −
<!DOCTYPE html>
<html>
<head>
<title>Float with Clear</title>
<style>
.float-box {
float: left;
width: 150px;
padding: 10px;
margin: 5px;
background-color: #FF9800;
color: white;
text-align: center;
}
.no-float {
float: none;
clear: both;
padding: 10px;
background-color: #9C27B0;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="float-box">Box 1</div>
<div class="float-box">Box 2</div>
<div class="no-float">This box clears both sides</div>
<div class="float-box">Box 3</div>
</body>
</html>
Two orange boxes float side by side at the top, followed by a purple box that appears below them (cleared), and then another orange box that starts floating again.
Conclusion
The float property provides a simple way to position elements horizontally. While modern CSS layout methods like Flexbox and Grid are preferred today, understanding float is still valuable for maintaining legacy code and specific use cases.
Updated on: 2026-03-15T13:58:59+05:30
2K+ Views
Advertisements