Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Make DIV Elements Display Inline Using CSS
To make div elements display inline using CSS, is a very simple and easy process. There are various approaches which we can use to make div elements display inline.
In this article we will be understanding five different approaches and some other properties to make div element display inline. We are having three div boxes which are block element, our task is to make div elements display inline using CSS.
Approaches to Make div Elements Display Inline Using CSS
Here is a list of approaches to make div elements display inline using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Display div Inline Using display Property
- Display div Inline Using float Property
- Display div Inline Using flex Property
- Display div Inline Using grid Property
- Display div Inline Using column Property
Display div Inline Using display Property
To make div elements display inline using CSS, we have used CSS display property which specifies how an element should be displayed.
- We have created three boxes using div tag and used .main div to design the boxes.
- To design the boxes we have set the background-color to green and text color to white, centered the text using text-align, added padding and a white border.
- We have used "display: inline;" which makes div elements display inline.
Example
Here is a complete example code implementing above mentioned steps to make div elements display inline using CSS display property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To make div elements display inline using CSS
</title>
<style>
.main div {
display: inline;
background-color: #04af2f;
color: white;
text-align: center;
border: 2px solid white;
padding: 10px;
}
</style>
</head>
<body>
<h3>
To Make div Elements Display inline Using CSS
</h3>
<p>
In this example we have used <strong>inline
</strong> property to make div elements
display inline using CSS
</p>
<div class="main">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</body>
</html>
Alternate display Property Values to Make a div Element Inline
Here are some more display property values which can be used to make div element display inline:
display: inline-block display: inline-flex display: flex display: table-cells
Display div Inline Using float Property
In this approach, we have used CSS float property to make div elements display inline using CSS.
- We have created and designed the boxes same as first approach and centered the text content vertically using CSS line-height property.
- We have used "float: left;" which makes div elements display inline. We can either use left or right value of float property.
Example
Here is a complete example code implementing above mentioned steps to make div elements display inline using CSS float property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To make div elements display inline using CSS
</title>
<style>
.main div {
float: left;
background-color: #04af2f;
color: white;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
border: 2px solid white;
}
</style>
</head>
<body>
<h3>
To Make div Elements Display inline Using CSS
</h3>
<p>
In this example we have used <strong>float
</strong> property to make div elements
display inline using CSS
</p>
<div class="main">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</body>
</html>
Display div Inline Using flex Property
In this approach to make div elements display inline using CSS, we have used CSS flex property.
- We have used .main div to design the boxes which is similar to first approach.
- In the second step we have used main class to make boxes as flex-items.
- We have used "flex-direction: row;" which arranges boxes in a row making them display as inline elements.
- We can also use row-reverse value of flex-direction property.
Example
Here is a complete example code implementing above mentioned steps to make div elements display inline using CSS flex-direction property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To make div elements display inline using CSS
</title>
<style>
.main {
display: flex;
gap: 5px;
flex-direction: row;
}
.main div {
background-color: #04af2f;
color: white;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h3>
To Make div Elements Display inline Using CSS
</h3>
<p>
In this example we have used <strong>flex
-direction</strong> property to make div elements
display inline using CSS
</p>
<div class="main">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</body>
</html>
Display div Inline Using grid Property
In this approach, we have used CSS grid property which makes div boxes behave as grid items making us to position them in rows and columns.
- We have used main class to display div boxes as grid and set the width which controls the distance between the boxes.
- We have used "grid-template-columns: auto auto auto;" property which displays the div boxes in three columns making them appear as inline elements.
Example
Here is a complete example code implementing above mentioned steps to make div elements display inline using CSS grid-template-columns property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To make div elements display inline using CSS
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto ;
width: 60%;
}
.main div {
background-color: #04af2f;
color: white;
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h3>
To Make div Elements Display inline Using CSS
</h3>
<p>
In this example we have used <strong>grid-
template-columns</strong> property to make
div elements display inline using CSS.
</p>
<div class="main">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</body>
</html>
Display div Inline Using column Property
To make div elements display inline using CSS, we have used CSS columns property which is used to set the number of columns and column's width.
- We have used main class to set the number of columns and column-gap to specify the distance between the columns.
- We have used "column-count: 6;" property to display div as inline and sets it's value to six to maintain the distance between the boxes.
Example
Here is a complete example code implementing above mentioned steps to make div elements display inline using CSS columns property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To make div elements display inline using CSS
</title>
<style>
.main {
column-count: 6;
column-gap: 10px;
}
.main div {
background-color: #04af2f;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h3>
To Make div Elements Display inline Using CSS
</h3>
<p>
In this example we have used <strong>column
</strong> property to make div elements
display inline using CSS.
</p>
<div class="main">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>
</body>
</html>
Conclusion
To make div elements display inline using CSS, is a very simple process and there are many approaches to do so. In this article, we have understood various approaches which are: by using CSS display property, by using float property, by using flex property, by using grid property and by using columns property.
5K+ Views
