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
How to make div with left aligned text and right aligned icon using CSS ?
Creating a div with left-aligned text and right-aligned icon is a common layout requirement in web development. The <div> element serves as a container that can hold both text content and icons in a structured format. Using CSS, we can position these elements precisely within the same horizontal line.
This article demonstrates three different CSS approaches to achieve this layout: the float property, CSS flexbox, and CSS table display methods. Each technique offers unique advantages for different scenarios.
Icon Used in Examples
All examples use the Material Icons library to display an "album" icon. The following setup is required
HTML markup for the icon
<i class="material-icons">album</i>
CSS library link (add to the <head> section)
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Using CSS Float Property
The float property allows elements to float to the left or right within their container. By applying float: right to the icon, it moves to the right side while the text remains on the left.
Example
<!DOCTYPE html>
<html>
<head>
<title>Left Text Right Icon - Float Method</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
background-color: #ccdb15;
color: #1b1b1b;
font-size: 20px;
padding: 10px;
margin: 2px 0;
}
.icon-right {
float: right;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
Sample Music Item 1
<span class="icon-right">
<i class="material-icons">album</i>
</span>
</div>
<div class="container">
Sample Music Item 2
<span class="icon-right">
<i class="material-icons">album</i>
</span>
</div>
<div class="container">
Sample Music Item 3
<span class="icon-right">
<i class="material-icons">album</i>
</span>
</div>
</body>
</html>
The output shows three rows with text aligned to the left and icons floated to the right
Sample Music Item 1 ? Sample Music Item 2 ? Sample Music Item 3 ?
Using CSS Flexbox
CSS Flexbox provides a more modern and flexible approach to layout. By setting display: flex on the container and using justify-content: space-between, the text and icon are automatically positioned at opposite ends.
Example
<!DOCTYPE html>
<html>
<head>
<title>Left Text Right Icon - Flexbox Method</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2e2b2b;
color: beige;
font-size: 18px;
padding: 10px;
margin: 2px 0;
}
.text-left {
flex: 1;
}
.icon-right {
flex-shrink: 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="flex-container">
<span class="text-left">Music Album Number 1</span>
<span class="icon-right">
<i class="material-icons">album</i>
</span>
</div>
<div class="flex-container">
<span class="text-left">Music Album Number 2</span>
<span class="icon-right">
<i class="material-icons">album</i>
</span>
</div>
<div class="flex-container">
<span class="text-left">Music Album Number 3</span>
<span class="icon-right">
<i class="material-icons">album</i>
</span>
</div>
</body>
</html>
The flexbox approach creates a clean layout with perfect alignment
Music Album Number 1 ? Music Album Number 2 ? Music Album Number 3 ?
Using CSS Table Display
The CSS table display method mimics HTML table behavior using display: table for the container and display: table-cell for the content. This approach ensures equal height alignment and works across all browsers.
Example
<!DOCTYPE html>
<html>
<head>
<title>Left Text Right Icon - Table Method</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.table-container {
display: table;
width: 100%;
background-color: #189943;
color: #0e0d0d;
font-size: 18px;
padding: 8px;
margin: 2px 0;
}
.table-cell-left {
display: table-cell;
text-align: left;
vertical-align: middle;
}
.table-cell-right {
display: table-cell;
text-align: right;
vertical-align: middle;
width: 1%;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="table-container">
<span class="table-cell-left">Music Album Number 1</span>
<span class="table-cell-right">
<i class="material-icons">album</i>
</span>
</div>
<div class="table-container">
<span class="table-cell-left">Music Album Number 2</span>
<span class="table-cell-right">
<i class="material-icons">album</i>
</span>
</div>
<div class="table-container">
<span class="table-cell-left">Music Album Number 3</span>
<span class="table-cell-right">
<i class="material-icons">album</i>
</span>
</div>
</body>
</html>
The table display method provides consistent vertical alignment
Music Album Number 1 ? Music Album Number 2 ? Music Album Number 3 ?
Comparison of Methods
Each approach has its advantages depending on your requirements
| Method | Browser Support | Flexibility | Best Use Case |
|---|---|---|---|
| Float Property | All browsers | Limited | Simple layouts, legacy support |
| Flexbox | Modern browsers (IE10+) | High | Responsive designs, complex alignment |
| Table Display | All browsers | Medium | Equal height requirements, vertical centering |
Conclusion
All three CSS methods float, flexbox, and table display effectively create divs with left-aligned text and right-aligned icons. Flexbox is the recommended modern approach for its flexibility and ease of use, while float and table methods remain useful for specific scenarios or legacy browser support requirements.
2K+ Views
