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 elements display inline using CSS?
To make div elements display inline using CSS, you have several effective approaches. By default, div elements are blocklevel elements that take up the full width of their container and start on a new line. Converting them to inline elements allows multiple divs to appear on the same line.
Syntax
/* Method 1: Using display property */
div {
display: inline;
}
/* Method 2: Using flexbox */
.container {
display: flex;
}
/* Method 3: Using CSS Grid */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
Method 1: Using display Property
The most straightforward approach is using the display: inline property. This converts blocklevel div elements into inline elements
<!DOCTYPE html>
<html>
<head>
<style>
.inline-divs div {
display: inline;
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 5px;
border: 2px solid #333;
}
</style>
</head>
<body>
<h3>Inline Div Elements</h3>
<div class="inline-divs">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</body>
</html>
Three green boxes with white text appear side by side on the same line, each containing "Box 1", "Box 2", and "Box 3" respectively.
Alternative display Values
You can also use these display property values for inline behavior
display: inline-block; /* Maintains block properties but flows inline */ display: inline-flex; /* Creates inline flex container */
Method 2: Using Flexbox
Flexbox provides more control over alignment and spacing. Set display: flex on the parent container
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
gap: 10px;
}
.flex-container div {
background-color: #2196F3;
color: white;
padding: 15px;
text-align: center;
flex: 1;
}
</style>
</head>
<body>
<h3>Flexbox Inline Divs</h3>
<div class="flex-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
Three blue boxes appear side by side with equal width and 10px gap between them, containing "Item 1", "Item 2", and "Item 3" with centered white text.
Method 3: Using CSS Grid
CSS Grid allows precise control over layout. Use grid-template-columns to define column structure
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.grid-container div {
background-color: #FF9800;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Grid Layout Divs</h3>
<div class="grid-container">
<div>Grid 1</div>
<div>Grid 2</div>
<div>Grid 3</div>
</div>
</body>
</html>
Three orange rounded boxes with equal width appear in a row with 15px gaps, displaying "Grid 1", "Grid 2", and "Grid 3" with centered white text.
Method 4: Using Float Property
The float property can make divs appear inline, though this is a legacy approach
<!DOCTYPE html>
<html>
<head>
<style>
.float-container::after {
content: "";
display: table;
clear: both;
}
.float-container div {
float: left;
width: 100px;
height: 60px;
background-color: #9C27B0;
color: white;
text-align: center;
line-height: 60px;
margin-right: 10px;
}
</style>
</head>
<body>
<h3>Float Layout Divs</h3>
<div class="float-container">
<div>Float 1</div>
<div>Float 2</div>
<div>Float 3</div>
</div>
</body>
</html>
Three purple boxes float side by side, each 100px wide and 60px tall, displaying "Float 1", "Float 2", and "Float 3" with centered white text.
Conclusion
Making div elements display inline can be achieved through multiple CSS approaches. The display: inline property is the simplest method, while flexbox and CSS Grid offer more sophisticated layout control and are preferred for modern web development.
5K+ Views
