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
What are Floating List Items in CSS
Floating list items in CSS allow you to create horizontal navigation bars and multi-column layouts by making list items flow side by side instead of stacking vertically. The float property removes elements from the normal document flow and positions them to the left or right of their container.
Syntax
li {
float: left | right | none;
}
Possible Values
| Value | Description |
|---|---|
left |
Floats the element to the left side |
right |
Floats the element to the right side |
none |
Default value, no floating applied |
Example: Horizontal Navigation Bar
The following example creates a horizontal navigation bar using floating list items −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f3f3f3;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 8px 16px;
background-color: orange;
color: white;
text-decoration: none;
border-right: 1px solid #ddd;
}
li a:hover {
background-color: #ff8c00;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
A horizontal navigation bar with orange background appears, showing "Home", "News", "Contact", and "About" links side by side. The links change to a darker orange when hovered over.
Key Points
- Use
overflow: hiddenon the parent container to contain floated elements - Remove default list styling with
list-style-type: none - Reset margin and padding for consistent cross-browser appearance
- Consider using modern alternatives like flexbox for better browser support
Conclusion
Floating list items provide a simple method to create horizontal navigation menus. While effective, modern CSS layouts using flexbox or grid offer more flexibility and better responsiveness for contemporary web design.
Updated on: 2026-03-15T12:28:17+05:30
677 Views
Advertisements