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
Float List Items to the right with CSS
The CSS float: right property allows you to align list items to the right side of their container. This is commonly used for creating navigation menus where some items appear on the left and others on the right.
Syntax
li {
float: right;
}
Example: Floating List Items to the Right
The following example demonstrates how to float specific list items to the right while keeping others on the left −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 12px 16px;
background-color: #ddd;
color: #333;
text-decoration: none;
border-right: 1px solid #bbb;
}
li a:hover {
background-color: #555;
color: white;
}
.right {
float: right;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#services">Services</a></li>
<li class="right"><a href="#about">About</a></li>
<li class="right"><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
A horizontal navigation bar appears with "Home", "News", and "Services" aligned to the left, while "About" and "Contact" are aligned to the right. The items have a gray background with hover effects.
Key Points
- Use
float: righton specific list items to align them to the right - Add
overflow: hiddento the parent container to contain floated elements - Right-floated items appear in reverse order (last item appears first on the right)
- Combine with
float: lefton other items for mixed alignment
Conclusion
The float: right property is an effective way to create navigation bars with items aligned to both left and right sides. Remember to use proper container styling to ensure the layout behaves correctly.
Updated on: 2026-03-15T12:28:30+05:30
3K+ Views
Advertisements