Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make div with left aligned text and right aligned icon using CSS ?
The <div> tag is used to specify a division. It means a container or a section in an HTML page. Sometimes, inside a div container, text and icons are both needed. And sometimes, the need is to align the text on the left while putting the icon on the right in the same line.
The CSS or Cascading Style Sheets means style specifications that are used for formatting an HTML document. It is used to give the style to the web page and its elements.
In this HTML-CSS article, using three different examples, the ways to show how to align the text to the left and the icon to the right inside a div tag are given. In example 1, the text is aligned to the left and the icon to the right using the float property of CSS. In example 2, the flex property of CSS is used to align the text to the right and the icon to the left, and in example 3, the table concept is used to align the div content to the left and right
ICON Used in these examples
The following tag is used to show the “album” icon in these examples.
<i class="material-icons">album</i>
For this the following library is used within the head section of the html page
<link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons">
Example 1: Making div with left aligned text and right aligned icon using CSS float.
In this example, two styles are defined for class “container” and for class “classfor icon”. For the icon, the property float: right is used.
File Used : divrightleftalign1.html
Code for the divrightleftalign1.html
<!DOCTYPE html>
<html>
<head>
<title>LEFT TEXT RIGHT ICON</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
background-color:rgb(204, 207, 21);
color:rgb(27, 27, 27);
font-size: 30px;
}
.classforicon {
float: right;
}
</style>
</head>
<body>
<div class="container">
<div>
<p class="text">Sample Music Item 1
<span class="classforicon">
<i class="material-icons">album</i>
</span>
</p>
</div>
<div>
<p class="text">Sample Music Item 2
<span class="classforicon">
<i class="material-icons">album</i>
</span>
</p>
</div>
<div>
<p class="text">Sample Music Item 3
<span class="classforicon">
<i class="material-icons">album</i>
</span>
</p>
</div>
</div>
</body>
</html>
Viewing The Result
For seeing the result open the divrightleftalign1.html in a browser. Check the result.
Example 2: Making div with left aligned text and right aligned icon using CSS flex.
In this example, three styles are defined. For class “main_container”, display: flex is used. For class “flex_col1”, text-align: left is used and for “flex_col2” text-align: right is used.
File Used: divrightleftalign2.html
Code for the divrightleftalign2.html
<!DOCTYPE html>
<html>
<head>
<title>Text alignment with icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.main_container {
display: flex;
background-color: #2e2b2b;
color:beige;
font-size: 20px;
}
.flex_col1 {
flex: 1;
text-align: left;
}
.flex_col2 {
flex: 1;
text-align: right;
}
</style>
</head>
<body>
<div class="main_container">
<b class="flex_col1">
Music Album Number 1
</b>
<span class="flex_col2">
<i class="material-icons">album</i>
</span>
</div>
<div class="main_container">
<b class="flex_col1">
Music Album Number 2
</b>
<span class="flex_col2">
<i class="material-icons">album</i>
</span>
</div>
<div class="main_container">
<b class="flex_col1">
Music Album Number 3
</b>
<span class="flex_col2">
<i class="material-icons">album
</span>
</div>
</body>
</html>
Viewing The Result
For seeing the result open the divrightleftalign2.html in a browser. Check the result.
Example 3: Making div with left aligned text and right aligned icon using the table.
In this example, three styles are defined. For the class “tablecontainer” , display: table is used. For class “table_cell1”, text-align: left is used and for “table_cell2” text-align: right is used.
File Used : divrightleftalign3.html
Code for the divrightleftalign3.html
<!DOCTYPE html>
<html>
<head>
<title>Text alignment with icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.tableContainer {
display: table;
width: 100%;
background-color: #189943;
color:rgb(14, 13, 13);
font-size: 20px;
}
.tablecell1 {
text-align: left;
display: table-cell;
}
.tablecell2 {
text-align: right;
display: table-cell;
}
</style>
</head>
<body>
<div class="tableContainer">
<b class="tablecell1">
Music Album Number 1
</b>
<span class="tablecell2">
<i class="material-icons">album</i>
</span>
</div>
<div class="tableContainer">
<b class="tablecell1">
Music Album Number 2
</b>
<span class="tablecell2">
<i class="material-icons">album</i>
</span>
</div>
<div class="tableContainer">
<b class="tablecell1">
Music Album Number 3
</b>
<span class="tablecell2">
<i class="material-icons">album</i>
</span>
</div>
</body>
</html>
Viewing The Result
For seeing the result open the divrightleftalign3.html in a browser. Check the result.
In this HTML - CSS article, using three different examples, the various ways of how to make a div with left aligned text and right-aligned icons, are given. In the first example, the way how to make a div with right aligned icon and left aligned text is shown by using float property of CSS. In the next example, we demonstrate the same with using CSS flex property. In the last example, a div with left aligned text and right aligned icon is given by using the table concept of CSS.
1K+ Views
